要在Angular 6中使用嵌套路由参数,你可以按照以下步骤进行操作:
parent
的父组件和一个名为child
的子组件,我们可以在父组件的路由配置中定义子路由如下:const routes: Routes = [
{ path: 'parent', component: ParentComponent, children: [
{ path: 'child/:id', component: ChildComponent }
]}
];
routerLink
指令来导航到带参数的子路由。例如,我们可以在父组件的模板中添加一个链接到子路由的按钮,如下所示:Go to Child Component
ActivatedRoute
服务来获取参数。在子组件的构造函数中注入ActivatedRoute
服务,并使用params
可观察对象来订阅参数的变化。例如,我们可以在子组件中的ngOnInit
方法中获取参数并打印出来,如下所示:import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
export class ChildComponent implements OnInit {
private routeSub: Subscription;
id: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.routeSub = this.route.params.subscribe(params => {
this.id = params['id'];
console.log(this.id);
});
}
ngOnDestroy() {
this.routeSub.unsubscribe();
}
}
通过遵循以上步骤,你就可以在Angular 6中成功使用嵌套路由参数。