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

Angular - 在路由到延迟加载模块时将数据传递给主机组件

Angular - pass data to host component upon routing to lazy loaded module

angular-routing