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