const appRoutes: Routes = [
{ path: 'parent', component: parentComp, data: { foo: 'parent data' }, children: [
{ path: 'child1', component: childComp1, data: { bar: 'child data 1' },
{ path: 'child2', component: childComp2, data: { bar: 'child data 2' }
]}
];
Run Code Online (Sandbox Code Playgroud)
如果我导航到/parent/child2然后查看ActivatedRoutefrom parentComp,data.foo则定义,但data.bar不是.我可以访问所有孩子的数组,但我不知道哪一个被激活.
如何从父路由的组件访问激活的子路由数据?
我正在使用Angular 5,但似乎无法使用问题其他答案中所述的方法从ActivatedRoute获取数据。
app.routes.ts
export const AppRoutes = [
{
path : '',
component: HomeView,
pathMatch: 'full', data: {key: 'home', label: 'Home'}},
{
path : 'about',
loadChildren: './+about/about.module#AboutModule'
},
{
path : 'account/:id',
loadChildren: './+account/account.module#AccountModule',
canActivate: [AuthGuard],
data: {key: 'account', label: 'My Account'}
},
];
Run Code Online (Sandbox Code Playgroud)
app.component.ts
@Component({
selector: 'ou-app',
templateUrl: 'app.component.html',
styleUrls: ['../styles/main.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
){}
ngOnInit(){
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
console.log('router events console... …Run Code Online (Sandbox Code Playgroud)