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

Question

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

• 应用程序模块.ts
• 应用程序路由.module.ts
• 登录/
  • 登录.组件.ts
• 行政/
  • 页数/
    • 用户管理/
    • 配置/
  • 管理模块.ts
  • 管理路由.module.ts
• 用户/
  • 页数/
    • 任务管理/
    • 配置/
  • 用户模块.ts
  • 用户路由.module.ts
• 客人/
  • 页数/
  • guest.module.ts
  • 访客路由.module.ts

从登录页面（/login来自应用程序路由），我想根据用户提供的凭据重定向到每个模块，但不/user /admin使用像或这样的子路由/guest

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

这可能吗？如果我有和/configuration的路线，会有问题吗？adminuser

编辑：这是一个Stackblitz 工作示例。登录后查看 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哪一部分，其余部分将发送到嵌套路由器。urlmatcher

博客：

这里有两篇博客文章，其中包含深入的详细信息和演练如何操作：

博客 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