[Angular2 Router] Use Params from Angular 2 Routes Inside of Components-优快云博客

本文介绍如何使用Angular2中的ActivatedRoute获取当前路由的详细信息。通过将参数作为流提供，可以轻松地从流中映射所需的参数并在模板中显示。以HerosComponent为例，展示了如何配置路由并获取路由参数。

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() {
  }

}