zoukankan      html  css  js  c++  java
  • [Angular2 Router] Use Params from Angular 2 Routes Inside of Components

    Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

    For example we have a HerosComonent, and inside HerosComponent, we will have multi HeroComponent:

    heros.component.html:

    <ul>
      <li>
        <a [routerLink]="'1'"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">Hero 1</a>
      </li>
    </ul>

    heros.routers.ts:

    import {HerosComponent} from "./heros.component";
    import {RouterModule} from "@angular/router";
    import {HeroComponent} from "./hero/hero.component";
    const routes = [
      {path: '', component: HerosComponent},
      {path: ':id', component: HeroComponent},
    ];
    export default RouterModule.forChild(routes)

    hero.component.ts:

    import { Component, OnInit } from '@angular/core';
    import {ActivatedRoute} from "@angular/router";
    
    @Component({
      selector: 'app-hero',
      templateUrl: 'hero.component.html',
      styleUrls: ['hero.component.css']
    })
    export class HeroComponent implements OnInit {
    
      id;
      constructor(private router: ActivatedRoute) {
        this.id = router.params.map((p:any) => p.id);
      }
    
      ngOnInit() {
      }
    
    }

    Github

  • 相关阅读:
    java八大数据类型
    变量,常量,作用域
    位运算符
    可变参数
    重写
    javascript中各种循环总结
    前端高效emmit快捷键
    移动端列表页布局
    sublime text3中添加插件CSScomb方法
    友元类头文件互相包含问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5907782.html
Copyright © 2011-2022 走看看