Angular 5:条件模块延迟加载

问题描述

我在尝试根据用户配置文件延迟加载模块时遇到问题，我定义了三个默认路径(每个路径都有空路径)，每个用户都可以访问一个特定的模块，我正在使用守卫来确定当前的用户配置文件(实际上我正在手动切换以通过设置 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 interestedhttps://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:条件模块延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！