Angular-在路由到延遲加載的模塊時將數據傳遞到主機組件

Question

我有一個具有以下路由的模塊：

{
    path: '',
    component: PagesComponent,
    children: [
      {
        data: { test: 'snoop' },
        path: 'dashboard',
        loadChildren: './modules/dashboard/dashboard.module#DashboardModule',
      },
      {
        data: { test: 'dogg' },
        path: 'admin', 
        loadChildren: './modules/admin/admin.module#AdminModule' 
      }
    ]
  }

我想做的就是根據您加載的延遲加載模塊，將一些數據傳遞給PagesComponent組件。

因此，在我的PagesComponent我想要這樣的東西：

constructor(private route: ActivatedRoute) {
    this.route.data.subscribe(data => {
      console.log(data);
    });
  }

然后， data參數將包含在根目錄中定義的數據。

我知道我可以輕松地從延遲加載的模塊組件本身中的路由中檢索數據，但是是否可以在主機組件（即PagesComponent獲取此數據？

背景：我想這樣做，以便可以根據您當前所在的頁面在菜單中顯示不同的數據。

Answer 1

延遲加載數據和簡單路由數據之間的區別在於，您必須更深入地研究。

constructor(route: ActivatedRoute) {
  route.url.subscribe(() => {
    console.log(route.snapshot.firstChild.firstChild.data);
   });
}