如何在Angular路由文件中访问Service变量？

问题根源 #

你的routes是在ClientRoutingModule类外部定义的常量，此时模块还未实例化，构造函数中的userService尚未完成注入，因此无法直接在路由配置中访问该服务实例。此外，路由的data属性属于静态配置，无法动态绑定服务中的实时数据。

正确解决方案 #

方案1：通过路由守卫动态判断权限（推荐） #

既然你已经使用了ClientRoutesGuard，直接在守卫中注入UserService，实时判断用户状态是否允许访问路由即可：

1. 修改ClientRoutesGuard代码：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserService } from 'path-to-your-user-service';

@Injectable({
  providedIn: 'root'
})
export class ClientRoutesGuard implements CanActivate {
  constructor(private userService: UserService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 从路由data中获取需要校验的步骤标识
    const requiredStep = route.data.requiredStep;
    // 实时获取用户的onboarding状态
    const onboardingStatus = this.userService.user.onboardingStatus;
    // 返回是否允许访问的判断结果
    return onboardingStatus[requiredStep].status;
  }
}

2. 更新路由配置，移除静态的isStepAccessible，改为传入需要校验的步骤标识：

const routes: Routes = [
  {
    path: 'welcome',
    component: WelcomeComponent,
  },
  {
    path: 'product-selection',
    component: ProductSelectionComponent,
    canActivate: [ClientRoutesGuard],
    data: {
      requiredStep: 'welcome' // 标记当前路由需要校验的步骤
    },
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ClientRoutingModule {}

方案2：提前加载静态初始化数据（仅适用于状态固定的场景） #

如果onboardingStatus是应用初始化时就固定不变的值，可以使用APP_INITIALIZER提前加载数据：

1. 创建初始化服务：

import { Injectable } from '@angular/core';
import { UserService } from 'path-to-your-user-service';

@Injectable({
  providedIn: 'root'
})
export class AppInitializerService {
  constructor(private userService: UserService) {}

  initialize(): Promise<void> {
    // 模拟从本地存储/接口加载初始化用户数据
    return new Promise((resolve) => {
      this.userService.user = {
        onboardingStatus: {
          welcome: { status: true },
          // 其他步骤配置...
        }
      };
      resolve();
    });
  }
}

2. 在根模块中配置APP_INITIALIZER：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitializerService } from 'path-to-your-initializer-service';

export function appInitializerFactory(initializer: AppInitializerService) {
  return () => initializer.initialize();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [AppInitializerService],
      multi: true
    }
  ]
})
export class AppModule {}

总结 #

优先选择方案1，因为用户的onboardingStatus通常是动态变化的，路由守卫能实时获取最新状态并判断权限，避免静态配置无法更新的问题。

内容的提问来源于stack exchange，提问作者Prshant Sharma