如何更新依赖注入令牌值

Question

Angular 依赖注入允许您使用令牌而不是服务类来注入字符串、函数或对象。

我在我的模块中声明它，如下所示：

providers: [{ provide: MyValueToken, useValue: 'my title value'}]

我这样使用它：

constructor(@Inject(MyValueToken) my_value: string) {
  this.title = my_value;
}

但是，如何更新组件中的值并让其他组件每次都获取新值？换句话说，我想模拟使用类似

BehaviorSubject

之类的东西来发出和接收值的功能。

如果这是不可能的，那么如果这些注入令牌值仅提供静态数据，那么它们有什么用，因为我可以简单地在组件中声明静态值并直接使用它。

Answer 1

您可以使用

BehaviorSubject

，而不是不可变的原语，然后在一个组件中访问和更新它，并在另一个组件中订阅：

export const MY_VALUE_TOKEN = new InjectionToken<BehaviorSubject<string>>('my.Value.token')

providers: [{ provide: MY_VALUE_TOKEN, useValue: new BehaviorSubject('')}]
    
// consumer
constructor(@Inject(MY_VALUE_TOKEN) my_value: BehaviorSubject<string>) {
  my_value.subscribe((my_value)=>this.title = my_value);
}

// producer
constructor(@Inject(MY_VALUE_TOKEN) my_value: BehaviorSubject<string>) {
  my_value.next('my title value');
}

Answer 2

除了向导：

如果您有一个用例，其中每个消费者都需要自己的 BehaviourSubject 实例。 （我碰巧在这个用例中）。确保定义了一个工厂。

const myFactory = () => { return new BehaviorSubject<string>('') };

providers: [
    { provide: MyValueToken, useFactory: myFactory }
]

// Then, as proposed in the top-answer.

// consumer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.subscribe((my_value)=>this.title = my_value);
}

// producer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.next('my title value');
}

Answer 3

如果您不想使用

BehaviorSubject

，您可以提供一个带有 getter 和 setter 的简单类。

class MyValue {

  get value(): string {
    return this._value;   
  }

  set value(val: string) {
   this._value = val;
  }
  private _value = '';

}

const MY_VALUE_TOKEN = new InjectionToken<MyValue>('MY_VALUE_TOKEN ');

// Provide class in either module or component providers array.
providers: [
  { provide: MY_VALUE_TOKEN , useClass: MyValue },
]

class MyComponent {

  // Inject in component constructor
  constructor(
    @Inject(MY_VALUE_TOKEN) private _myValue: MyValue,
  ) {

    // Access current value
    console.log(this._myValue.value);

    // Set new value
    this._myValue.value = 'new value';
  }

}

Answer 4

关于为什么...

既然您也想知道为什么可能想要注入静态结构，Angular Material 经常这样做来为组件提供配置。

例如。用于芯片控制：

@NgModule({
  providers: [
    {
      provide: MAT_CHIPS_DEFAULT_OPTIONS,
      useValue: {
        separatorKeyCodes: [ENTER, COMMA]
      }
    }
  ]
})

无需了解这些数据代表什么，只需意识到您正在注入一个带有值

MAT_CHIPS_DEFAULT_OPTIONS

 的令牌 

{ separatorKeyCodes: [ENTER, COMMA] }

这将从您的 AppModule 或您定义的任何模块或组件继承 - 就像任何其他可注入服务一样。这同样可以在您的

@Component

或

@Directive

定义中，为单个组件（及其子组件）提供配置。

当然，当应用程序中的不同模块或组件需要不同的配置时，您可以将其注入其中，并且只有子组件会继承它。

说实话，这样做似乎很痛苦，而不是仅仅在组件上设置值，但这就是许多 Angular Material 控件的工作方式。当然，好处是您只需执行一次，所有内容都会继承它 - 也许最值得注意的是，这些通常是您通常不需要更改的参数。