首先回顾一下如何配置路由:
import { RouterModule } from '@angular/router';
@NgModule({
RouterModule.forRooter([{
path: 'page1',
component: Page1Component
}])
})
如果想通过url给下一个页面传递一个名为name的参数,需要这样配置:
import { RouterModule } from '@angular/router';
@NgModule({
RouterModule.forRooter([{
path: 'page2/:name',
component: Page2Component
}])
})
那么page2页面如何接受这个name参数呢?首先我们需要导入ActivatedRoute和Params服务,同时需要导入switchMap运算符。
import { ActivatedRoute, Params } from '@angular/router';
import 'rxjs/add/operator/switchMap';
在Page2Component的构造函数中将ActivatedRoute的值保存到私有变量中:
export class Page2Component {
name: string;
constructor(private route: ActivatedRoute){}
}
定义一个sayHello的方法接受参数并输出问候语句:
export class Page2Component {
name: string;
constructor(private route: ActivatedRoute){}
sayHello(): void {
this.route.params
.switchMap((params: Params) => this.name = params['name'])
.subscribe(():void => {console.log('hello,'+ this.name)});
}
}