我使用 Angular2 RC5 通过路由器获取一个简单的参数。参数只是一个名称。在 app.routes.ts 中,我将路由参数设置为“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'];
});
关于javascript - 如何在 Angular2 rc5 中获取路由参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40219966/