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

如何解决在应用路由模块中调用类函数

大家好，我正在我的项目中实现一个功能标志，这是我们正在创建的新登录流程。如果功能标志打开 (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",{
    path: "claim-information",component: TrustFormComponent,showBreadcrumb: false,{
    path: "maintenance",component: MaintenanceComponent,{
    path: "",redirectTo: "login-flow",pathMatch: "full",// { // 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
  }
}

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

解决方法

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

@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