如何基于路由数据为Angular模块条件注入不同Injection Token值

核心思路 #

通过工厂函数+路由激活快照（ActivatedRouteSnapshot），从懒加载路由的data配置中读取参数，动态返回Injection Token的对应值。

具体实现步骤 #

1. 定义Injection Token
   先在项目中定义需要动态赋值的Injection Token：

// src/app/abc/tokens.ts
import { InjectionToken } from '@angular/core';

export const ABC_TOKEN = new InjectionToken<any>('ABC_TOKEN');

2. 在懒加载模块中配置动态提供者
   在AbcModule的providers数组中，使用useFactory创建动态提供者，注入ActivatedRoute来获取路由data：

// src/app/abc/abc.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ABC_TOKEN } from './tokens';
import { ActivatedRoute } from '@angular/router';
import { AbcComponent } from './abc.component';

@NgModule({
  imports: [CommonModule],
  declarations: [AbcComponent],
  providers: [
    {
      provide: ABC_TOKEN,
      useFactory: (route: ActivatedRoute) => {
        // 从路由快照中读取useA参数，默认值设为false
        const useA = route.snapshot.data['useA'] ?? false;
        // 根据useA返回对应的值（替换成你的a/b实际值）
        return useA ? '实际值A' : '实际值B';
      },
      // 声明依赖：需要注入ActivatedRoute
      deps: [ActivatedRoute]
    }
  ]
})
export class AbcModule { }

3. 在组件中使用动态Token值
   在模块内的组件中注入ABC_TOKEN即可获取动态值：

// src/app/abc/abc.component.ts
import { Component, Inject } from '@angular/core';
import { ABC_TOKEN } from './tokens';

@Component({
  selector: 'app-abc',
  template: `<p>当前Token值：{{ tokenValue }}</p>`
})
export class AbcComponent {
  constructor(@Inject(ABC_TOKEN) public tokenValue: any) { }
}

4. 路由配置保持原有结构
   你的路由配置无需修改，继续在懒加载路由的data中传递useA参数：

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'abc',
    loadChildren: () => import('./abc/abc.module').then(m => m.AbcModule),
    data: { useA: true }
  },
  // 可添加另一个路由测试不同值
  {
    path: 'abc-b',
    loadChildren: () => import('./abc/abc.module').then(m => m.AbcModule),
    data: { useA: false }
  }
];

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

关键注意事项 #

• 懒加载模块特性：每个懒加载路由会创建独立的模块实例，不同路由的data参数不会互相干扰。
• 依赖声明：必须在deps数组中指定ActivatedRoute，否则工厂函数无法获取路由实例。
• 默认值处理：使用??运算符设置默认值，避免路由data中未定义useA时出现undefined。

内容的提问来源于stack exchange，提问作者kk-at-cbx