angular2路由器数据传递给子级,但不传递lazyload子级
问题1: 组件oninit函数使用router.data.subscribe获取数据和父数据 为什么可以获取父数据 我在路由器文件上找不到信息 问题2: 为什么无法获取根父数据?在app-router.module.ts中,我定义了 数据:{pageTitle:'youare',测试:123213213} 我无法从CrisListComponent获取数据 app-router.module.tsangular2路由器数据传递给子级,但不传递lazyload子级,angular,angular-routing,angular-router,Angular,Angular Routing,Angular Router,问题1: 组件oninit函数使用router.data.subscribe获取数据和父数据 为什么可以获取父数据 我在路由器文件上找不到信息 问题2: 为什么无法获取根父数据?在app-router.module.ts中,我定义了 数据:{pageTitle:'youare',测试:123213213} 我无法从CrisListComponent获取数据 app-router.module.ts const routes: Routes = [ {path: '', redirectTo:
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 }
},
]
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
}
]
}
]
}
];
危机中心路由.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 }
},
]
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
}
]
}
]
}
];
crisis-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上,打印日志:asdfsadfsadfsadf{preload:true,you:are}有人解释了这个问题。Angular2/4路由器的设计方式,如果路由器路径为空,则父路由器数据将传递给子路由器 任何对这个问题感到困惑的人,都可以看到下面的细节
这个问题是一个月前提出的,似乎没有人回答我想要的问题,我希望这个答案能帮助那些遇到这个问题的人。 我不是以英语为母语的人,很抱歉我的英语不好 它按预期工作。以下是继承参数和数据的规则:
1.解析的数据是从参数派生的。因此,这些规则同样适用于参数和数据。 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"}
}
}
如果您想从CrisListComponent中的根目录获取数据,只需
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。解析的数据是从参数派生的。因此,这些规则同样适用于参数和数据。2.空路径路由继承其父路径的参数和数据。这是因为它不能有自己的参数,因为它是一个空路径路由,因此,它经常使用其父级的参数和数据作为自己的参数。3.如果父路由是无组件路由,则任何路由都会继承其父路由的参数和数据。这是因为没有组件可以注入父级的激活路由。