如何将来自不同延迟加载模块的两个组件绑定到同一路由？

Question

我有一个Angular应用程序，其结构如图所示：

​

​

要根据从服务器检索到的数据有条件地选择其中一个主题。

const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/presentation/theme1/theme1.module#Theme1Module',
    canActivate: [Theme1Guard],
  },
  {
    path: '',
    loadChildren: 'app/presentation/theme2/theme2.module#Theme2Module',
    canActivate: [Theme2Guard],
  }
];

theme-1和theme-2模块都具有到不同布局和样式的相似组件的相同路由。

更新1

我尝试了CanActivate卫士，一个用于theme-1，另一个用于theme-2。每个守卫从themeStore中检索当前主题名称，并将其与当前路由进行比较：

canActivate() {
    let currentTheme: string = '';
    this.themeStore.currentTheme.subscribe((themeName) => {
      currentTheme = themeName;
    });

    if (currentTheme == 'theme1') {
      return true;
    }
    else {
      return false;
    }
  }

然而，这不会起作用，因为在第一个路径被CanActivate guard拒绝后，Angular路由器不会查找相同的路径。

更新2

在Angular存储库中有一个开放的问题- Load a component in a route depending on an asynchronous condition。这似乎是几个月前添加到积压中的。

Answer 1

主题-1和主题-2都有相同的路径到不同布局和样式的相似组件。

无延迟加载

创建theme-1和theme-2路由：

{
    path: 'theme-1', component: Theme1Component,
    children: [
      {
        path: 'page', 
        component: PageComponent,
      }

    ]
},
{
    path: 'theme-2', component: Theme2Component,
    children: [
      {
        path: 'page', 
        component: PageComponent,
      }
    ]
},

使用延迟加载

如果它们是可延迟加载，则在主路由模块中

const routes: Routes = [
  {
    path: '',     
    children: [
      {
        path: 'theme-1',         
        loadChildren: 'path/to/theme1#module',
      },
      {
        path: 'theme-2',         
        loadChildren: 'path/to/theme2#module',
      }

    ]
  },
  ...
];

延迟加载theme-1，theme-2模块路由：

theme1-routing.module:

const routes: Routes = [
    {
        path: '',
        component: Theme1Component,

        children: [
            {
              path: 'page', 
              component: PageComponent,
            },           
        ]
    }
];

theme2-routing.module:

const routes: Routes = [
    {
        path: '',
        component: Theme2Component,

        children: [
            {
              path: 'page', 
              component: PageComponent,
            },           
        ]
    }
];

Answer 2

我认为您的第二个模块的路由已被覆盖，请尝试将您的路由放在第二个模块的导入的第一个位置：

 // in your second module
 imports: [
    routing, 
    ... // then import the others 
],