在Angular中,辅助路由参数不会自动地包含在ActivatedRoute
中。要访问辅助路由的参数,可以通过注入ActivatedRoute
的父级路由来实现。
以下是一个解决方法的代码示例:
首先,在路由配置中定义辅助路由和它的参数:
const routes: Routes = [
{ path: 'main', component: MainComponent },
{ path: 'aux', component: AuxComponent, outlet: 'aux', children: [
{ path: '', component: AuxHomeComponent },
{ path: 'detail/:id', component: AuxDetailComponent }
]}
];
接下来,在辅助路由组件中注入父级路由,并使用snapshot
属性来获取辅助路由的参数:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-aux-detail',
template: `
Aux Detail
Id: {{ id }}
`
})
export class AuxDetailComponent implements OnInit {
id: string;
constructor(private parentRoute: ActivatedRoute) { }
ngOnInit() {
this.id = this.parentRoute.snapshot.paramMap.get('id');
}
}
在上面的示例中,ActivatedRoute
是通过构造函数的参数注入的,并且通过snapshot
属性获取辅助路由的参数。
现在,你可以在AuxDetailComponent
中使用this.id
来访问辅助路由的参数了。
希望对你有帮助!