在 Angular 的同一路径上有条件地加载不同的模块

Question

我有一个多用户 Angular 应用程序，每个用户都有一个模块（因为他们有完全不同的可访问页面），如下所示：

• app.module.ts
• app-routing.module.ts
• 登录/
  • login.component.ts
• 管理员/
  • 页数/
    • 用户管理/
    • 配置/
  • admin.module.ts
  • admin-routing.module.ts
• 用户/
  • 页数/
    • 任务管理/
    • 配置/
  • user.module.ts
  • user-routing.module.ts
• 客人/
  • 页数/
  • guest.module.ts
  • guest-routing.module.ts

从登录页面（来自 app-routing 的/login），我想根据用户提供的凭据重定向到每个模块，但 NOT 使用像 /user @987654324 这样的子路由@或/guest

相反，当管理员登录时，我希望重置 URL。因此，例如，管理员不应该看到路径/admin/user-management 或/admin/configuration；它只是访问/user-management 或/configuration

这可能吗？如果我有 admin 和 user 的 /configuration 路由会不会有问题？

编辑：这是Stackblitz working example。登录后查看 URL 路由。

编辑 2： 在 Stackblitz 示例中，您可以在 master 上看到原始问题，在 solution 分支上看到工作解决方案。

Answer 1

解决方案：

经过大量调查，我发现可以通过创建路由matcher来完成。

代码：

我设法使它与您的代码一起工作。这是工作示例： https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html

这是app-routing.module.ts上的相关代码：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'user') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'admin') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'guest') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./guest/guest.module').then(m => m.GuestModule)
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'login'
  }
];

注意：

如这里所说：https://github.com/angular/angular/issues/23866#issuecomment-388527483，当我们使用路由matcher 时，我们需要指定url 的哪一部分被matcher 函数消耗，剩余部分将被发送到嵌套路由器。

博客：

这里有两篇博文，其中包含详细的详细信息和操作方法：

博客1：https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483

博客2：https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

Answer 2

我猜你使用延迟加载配置看起来像这样：

  {
    path: 'config',
    loadChildren: () => import('./pages/userConfig/userConfig.module').then( m => m.UserConfigPageModule),
  },

您可以将箭头函数转换为普通函数并执行例如一个 switch 语句来决定你想加载什么模块：

  {
    path: 'config',
    loadChildren: () => {
      switch(userType) {
        case 'IsAdmin':
          return import('./pages/adminConfig/adminConfig.module').then( m => m.AdminConfigPageModule);
        case 'IsUser':
          return import('./pages/userConfig/userConfig.module').then( m => m.UserConfigPageModule);
        default:
          return import('./pages/guestConfig/guestConfig.module').then( m => m.GuestConfigPageModule);
      }
    },
    canActivate: [ConfigGuard],
  },

工作stackblitz

注意：
注销后，您需要刷新 stackblitz 视图，否则会出现故障。我稍后会研究它。