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

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

更新2

Angular存储库中存在一个未解决的问题 - Load a component in a route depending on an asynchronous condition。几个月前它似乎被添加到了积压中。

Answer 1

theme-1和theme-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 
],

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

更新1

更新2

2 个答案:

没有延迟加载

延迟加载