有条件角路由

Question

我有一条路线：

    {
        path: 'business-rules',
        data: { routeName: _('Business rules') },
        component: BusinessRulesComponent,
    },

我正在开发一个新组件，它将在某一时刻取代BusinessRulesComponent。用户可以使用特性标志选择新的NewBusinessRulesComponent。

现在，我想知道是否可以根据所选的特性标志进行条件路由。

我添加了一个警卫CanAccessNewBusinessRules，但据我所知，这只能阻止一条路线的出现：

    {
        path: 'business-rules',
        data: { routeName: _('Business rules') },
        component: BusinessRulesComponent,
        canActivate: [CanAccessNewBusinessRules]
    },

CanAccessNewBusinessRules

        const new_business_rules_flagged = await this.companyFeatureFlagsService.getAllFeatureFlags(company.id)
            .then((flags) => flags.includes(possibleFlags.new_business_rules))

        if (new_business_rules_flagged) {
            // this.router.navigate(['new-business-rules'])
            return false;
        }

        return true;

我是否可以更改守卫中的路由，或者是否最好添加另一条仅在启用标志时才处于活动状态的路由？

Answer 1

不是的。你不能这么做。处理这种情况的一个好方法是从你的守卫返回UrlTree，这样角可以路由到另一条路径。

app-routing.module.ts

  {
    path: 'page',
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
    canActivate: [ProfileGuard]
  },
  {
    path: 'page2',
    loadChildren: () => import('./pages/another/another.module').then(m => m.AnotherModule),
  }

然后在你的守卫中决定第一条路线(page)可以激活，或者你需要导航到page2

profile.gurad.ts

 if (!condition) {
   return this.router.parseUrl('/page2');
 }
 return true;