AngularJS迁移至Angular 15：.value()等价实现方案咨询

Angular 15 其实有和 AngularJS .value() 功能等价的实现，甚至更灵活，不用纠结类还是服务，分两种场景选合适的方式就行：

1. 最接近 .value() 的方案：使用 InjectionToken + useValue #

如果你的 myValue 只是静态的配置对象，不需要附加任何业务逻辑，直接用 InjectionToken 配合 useValue 就可以，和 AngularJS 的 .value() 逻辑完全一致：

步骤示例： #

• 先定义一个 InjectionToken：

import { InjectionToken } from '@angular/core';

export const MY_VALUE = new InjectionToken<{field1: string, field2: string}>('myValue');

• 在你的模块（比如 TestModule）的 providers 里配置注入值：

import { NgModule } from '@angular/core';
import { MY_VALUE } from './path-to-your-token';

@NgModule({
  providers: [
    {
      provide: MY_VALUE,
      useValue: { field1: 'value1', field2: 'value2' }
    }
  ]
})
export class TestModule {}

• 在组件/服务中注入使用：

import { Component, Inject } from '@angular/core';
import { MY_VALUE } from './path-to-your-token';

@Component({...})
export class TestComponent {
  constructor(@Inject(MY_VALUE) private myValue: {field1: string, field2: string}) {
    console.log(this.myValue.field1); // 输出 'value1'
  }
}

2. 适合扩展的方案：用 @Injectable 服务包装 #

如果未来可能需要给这个值添加逻辑（比如动态修改、格式化方法），直接把值封装在一个服务里更合适：

代码示例： #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 或者指定到 TestModule，按需选择
})
export class MyValueService {
  myValue = { field1: 'value1', field2: 'value2' };

  // 以后可以加方法，比如修改值的逻辑
  updateField1(newValue: string) {
    this.myValue.field1 = newValue;
  }
}

• 在组件中注入使用：

import { Component } from '@angular/core';
import { MyValueService } from './my-value.service';

@Component({...})
export class TestComponent {
  constructor(private myValueService: MyValueService) {
    console.log(this.myValueService.myValue.field2); // 输出 'value2'
    this.myValueService.updateField1('newValue');
  }
}

总结 #

• 纯静态配置，选 InjectionToken + useValue，完全对应 AngularJS .value() 的用法；
• 需要后续扩展逻辑，选 @Injectable 服务，更符合 Angular 组件化、服务化的设计思路。

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