angular2路由器数据传递给子节点但不通过lazyload子节点

问题1：组件oninit函数使用router.data.subscribe获取数据和父数据。angular2路由器数据传递给子节点但不通过lazyload子节点

为什么可以获取父数据？

我无法找到路由器文档信息。 angular2 router

问题2：为什么无法获取根父数据？在APP-router.module.ts我定义
数据：{PAGETITLE： 'youare'，测试：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“}”

来源

2017-08-01 bignewyork

有人问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，只是

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} 
    } 
}

我希望这会帮助你。

来源

2017-09-07 08:48:48 Chang

优秀的解说！谢谢。 – bignewyork

有人解释了这个问题。 Angular2/4路由器设计的方式，如果路由器路径为空，则父路由器数据将传递给子节点。

有人迷惑了这个问题，可以看到如下的细节。

Router data and param should be available to children components

来源

2017-08-07 06:24:59 bignewyork

1.解决的数据来源于params。因此这些规则以相同的方式适用于参数和数据。
2.空路径路由继承其父路由和数据。这是因为它不能有自己的参数（这是一个空路径路径），因此，它经常使用其父参数和数据作为自己的参数。 3.如果父代是无组件路由，任何路由都将继承其父代的参数和数据。这是因为没有组件可以注入父级的激活路由。 – bignewyork

angular2路由器数据传递给子节点但不通过lazyload子节点

回答

相关问题