Angular 5:条件模块延迟加载 [英] Angular 5: conditional module lazy loading

问题描述

在尝试根据用户个人资料延迟加载模块时遇到问题， 我定义了三个默认路径(每个路径的路径为空)，每个用户都可以访问特定的模块， 我正在使用防护措施来确定当前用户配置文件(实际上，我正在手动切换以通过设置 const canGo = true 来设置默认加载的模块)

I'm encountering an issue while trying to lazy load module according to the user profile, I defined three default paths (with empty path for each route) and each user has access to a specific module, i'm using a guards in order to detemine the current user profile (actually i'm toggling manually to set the default loaded module by setting const canGo =true)

预期的行为是，实际的路由配置应根据配置文件激活适当的路由，但事实并非如此.

The expected behavior is that the actual routing configuration should activate the adequate route according to the profile but that's not the case.

export const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/user/user.module#UserModule',
    canActivate: [
      CanActivateUserModuleGuard
    ],
  },
  {
    path: '',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canActivate: [
      CanActivateAdminModuleGuard
    ]
  },
  {
    path: '',
    loadChildren: 'app/moderator/moderator.module#ModeratorModule',
    canActivate: [
      CanActivateModeratorModuleGuard
    ]
  },
  {
    path: '404',
    component: NotFoundComponent
  }
];

注意: 在线问题下方，如果有兴趣 https://stackblitz.com/edit/angular- vd4oyu?file = app％2Fapp-routing.module.ts

NB: below the online issue if interested https://stackblitz.com/edit/angular-vd4oyu?file=app%2Fapp-routing.module.ts

达到此要求的最佳方法是什么?

What is the best way to accomplish this requirement?

推荐答案

路由器将仅在与其匹配的第一条路由上尝试使用防护.由于此限制，您将不得不尝试以下两种方法之一.

The router will only try the guard on the first route that it matches. Because of this limitation you will have to try one of two options.

第一个方法是实施自定义 UrlMatcher ，它将有效地完成您的警卫工作然后仅在您要加载的模块上使它匹配.如果您需要使用其他服务，则可能会很困难，因为UrlMatcher只是一个函数，因此您将不会获得任何DI.

The first is to implement a custom UrlMatcher that will effectively do the work of your guard and then only have it match on the module you want to load. This can be difficult if you need to make use of other services as the UrlMatcher is just a function so you won't get any DI.

第二个选择是拥有一条路径为''的通用路由，该路由上具有另一个防护措施，该防护措施执行其他三个防护措施的作用，然后路由至相应的模块.这听起来有点像黑客，但是 Angular文档建议在ToH教程中做到这一点.

The second option is to have a generic route with path '' that has another guard on it that performs the actions of the other three guards and then routes to the appropriate module. This sounds like a bit of a hack, however, the Angular documentation suggests doing just that in the ToH tutorial.

export class CanActivateModuleGuard implements CanActivate {

  constructor(private router: Router,
    private userGuard: CanActivateUserModuleGuard,
    private adminGuard: CanActivateAdminModuleGuard,
    private modGuard: CanActivateModeratorModuleGuard) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let canGo = [{
      guard: this.adminGuard,
      url: 'admin',
    }, {
      guard: this.userGuard,
      url: 'user',
    }, {
      guard: this.modGuard,
      url: 'moderator',
    }].some((config) => {
      if (config.guard.canActivate(route, state)) {
        if (state.url !== `/${config.url}`) {
          this.router.navigate([config.url]);
        }
        return true;
      }
    });

    if (!canGo) {
      this.router.navigate(['/404']);
    }

    return canGo;
  }
}

路线

export const routes: Routes = [
  {
    path: '',
    canActivate: [CanActivateModuleGuard],
    children: [{
      path: 'user',
      loadChildren: 'app/user/user.module#UserModule',
      canActivate: [
        CanActivateUserModuleGuard
      ],
    },
    {
      path: 'admin',
      loadChildren: 'app/admin/admin.module#AdminModule',
      canActivate: [
        CanActivateAdminModuleGuard
      ]
    },
    {
      path: 'moderator',
      loadChildren: 'app/moderator/moderator.module#ModeratorModule',
      canActivate: [
        CanActivateModeratorModuleGuard
      ]
    }],
  },
  {
    path: '404',
    component: NotFoundComponent
  }
];

这篇关于Angular 5:条件模块延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！