如何在Angular2 rc5中获取路由参数 - How to get Route Params in Angular2 rc5?

How to get Route Params in Angular2 rc5?

本文关键字：获取路由参数 rc5 Angular2 | 更新日期: 2023-09-27

我通过路由器获得一个简单的参数，使用Angular2 RC5。参数只是一个名称。在app.routes。在命令行中，我将路由参数设置为"directory/:ninja"。

app.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { DirectoryComponent } from "./directory/directory.component";
import { HomeComponent } from "./home/home.component";
const APP_ROUTES: Routes = [
    { path: 'directory/:ninja', component: DirectoryComponent },
    { path: '', component: HomeComponent }
];
export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

directory.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-directory',
  templateUrl: './directory.component.html',
  styleUrls: ['./directory.component.css']
})
export class DirectoryComponent implements OnInit {
  ninja: string;    
  constructor(public route: ActivatedRoute) { 
    this.ninja = route.snapshot.params['ninja'];
  }
  ngOnInit() {
  }
}

directory.component.html

{{ninja}}

每当我访问http://localhost:4200/directory/richard时，它都会将我重定向到ROOT URL。理查德是忍者的名字。

应该在directory.component.ts

中显示忍者的名字

1)导入

import {ActivatedRoute} from '@angular/router';

2)构造函数

constructor(private route:ActivatedRoute,.......

3)订阅

this.route.params.subscribe(params => {
  console.log('Param whatever: ', params['whatever']);
  this.whatever = params['whatever'];
});