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子節點

回答

相關問題