Question

大家好，我正在我的项目中实现一个功能标志，这是我们正在创建的新登录流程。如果功能标志打开 (true)，那么我们将通过让路由器首先导航到新的登录流来实现它，否则默认路由将重定向到不同的路径。

我有一个类来处理功能标志，我会在使用它们的组件的构造函数中实现它们，但在这种情况下它有点不同。如何在路由器中导入该类？没有类或构造函数，我们只是导出const路由，那我该怎么办？

这是我的应用程序路由模块，我可能会实现扩展运算符或其他东西来处理分配正确的路由，我只想帮助您了解如何在此文件中实例化类函数：

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { FeatureFlagsService } from './common/feature-flag/feature-flags.service';
import { TrustFormComponent } from "./claims/components/trust-form/trust-form.component";
import { MaintenanceComponent } from "./shared/components/maintenance/maintenance.component";
import { LoginFlowComponent } from "./claims/components/login-flow/login-flow.component";


// FeatureFlagsService.showFeature // How do I do something like this?


export const routes: Routes = [
  {
    path: "login-flow",
    component: LoginFlowComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false
    },
  },
  {
    path: "eiduser",
    loadChildren: () =>
      import("./claims/claims.module").then((m) => m.ClaimsModule),
    data: {
      breadcrumb: "Dashboard",
      showBreadcrumb: true,
    },
  },
  {
    path: "trustuser",
    loadChildren: () =>
      import("./claims/claims.module").then((m) => m.ClaimsModule),
    data: {
      breadcrumb: "Dashboard",
      showBreadcrumb: true,
    },
  },
  {
    path: "claim-information",
    component: TrustFormComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  {
    path: "maintenance",
    component: MaintenanceComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  {
    path: "",
    redirectTo: "login-flow",
    pathMatch: "full",
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  // { // Other we'd route to this
  //   path: "",
  //   redirectTo: "eiduser",
  //   pathMatch: "full",
  //   data: {
  //     breadcrumb: "",
  //     showBreadcrumb: false,
  //   },
  // },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: "enabled",
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

这是功能标志服务：

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable()
export class FeatureFlagsService {
  showFeature(featureName: string): boolean {
    // Read the value from the config service
    if (environment.featureFlags.hasOwnProperty(featureName)) {
      return environment.featureFlags[featureName];
    }
    return false; // if feature not found, default to turned off
  }
}

你们有什么推荐的吗？我不想重新创建这个逻辑，我如何在路由器模块中直接调用这个服务？

Answer 1

在这里你可以尝试路由器保护的概念。首先你需要通过实现这个可以激活来创建服务。然后，您可以在此处注入功能标志服务，并在此路由发生时做您想做的任何事情。

@Injectable({
  providedIn: 'root'
})
export class YourGuard implements CanActivate {
  constructor(private featureService: FeatureFlagsService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.featureService.showFeature(....)) {
      return true;
    } else {
      return false;
    }
  }
}

然后你需要像下面这样在你的路由器中添加这个保护

    const routes: Routes = [
     {
    path: "login-flow",
    component: LoginFlowComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false
    },
    canActivate: [YourGuard]
  },.......
    ];

参考文献：https://codecraft.tv/courses/angular/routing/router-guards/， https://angular.io/api/router/CanActivate

在应用路由模块中调用类函数

1 个答案: