问题1: 组件oninit函数使用router.data.subscribe来获取数据和父数据。
为什么可以获取父数据?
我在路由器doc上找不到信息。 angular2 router
问题2:
为什么不能获得root父数据?在app-router.module.ts我定义了
数据:{pageTitle:'youare',test:123213213},
我无法在CrisisListComponent获取数据。
APP-router.module.ts
const routes: Routes = [
{path: '', redirectTo: 'login', pathMatch: 'full'},
{path: 'login', component: LoginPage},
{
path: ':id',
component: MainLayoutComponent,
data: {pageTitle: 'youare', test:123213213},
children: [
{
path: 'personalcenter',
loadChildren: 'app/personalcenter/personal-center.module#PersonalCenterModule',
data: {pageTitle: 'personalcenter'}
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: { preload: true }
},
]
危机中心routing.module.ts
const crisisCenterRoutes: Routes = [
{
path: '',
component: CrisisCenterComponent,
data:{you:"are"},
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolver
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
危机list.component.ts
export class CrisisListComponent implements OnInit {
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.data.subscribe(data=>{
console.log("asdfsadfsadf"+JSON.stringify(data));
});
}
}
在CrisisListComponent上,打印日志:“asdfsadfsadf {”preload“:true,”you“:”are“}”
答案 0 :(得分:1)
问题在1个月前被问到,似乎没人按我的意愿回答,我希望这个答案可以帮助那些遇到这个问题的人。 我不是母语为英语的人,抱歉我的英语不好。
它按预期工作。
这些是继承参数和数据的规则:
1.已解决的数据来自params。因此规则以同样的方式适用于参数和数据 2.空路径路由继承其父节点和数据。这是因为它不能有自己的参数(它是一个空路径路径),因此,它经常使用其父项的参数和数据作为自己的参数。
3.如果父级是无组件路由,则任何路由都会继承其父级的参数和数据。这是因为没有可以注入父级激活路由的组件。 没有其他东西可以继承。
如果您想获取数据但不能继承无组件父级,则可以使用ActivatedRouteSnapshot.routeConfig
来获取原始路由配置。
export class CrisisListComponent implements OnInit {
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
console.log(this.route.snapshot.routeConfig.data) // {you:"are"}
}
}
如果你想在CrisisListComponent中从root获取数据,只需
export class CrisisListComponent implements OnInit {
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
console.log(this.route.root.snapshot.data) // {pageTitle: 'youare', test:123213213}
}
}
我希望这会对你有所帮助。
答案 1 :(得分:0)
任何人都对这个问题感到困惑,可以看详情如下。
Router data and param should be available to children components