如何更新依赖项注入令牌值

Question

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

我在我的模块中这样声明：

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

除了向导之外：

如果你有一个用例，每个消费者都需要自己的BehaviorSubject实例。(我恰好在这个用例中)。确保您定义了一个工厂。

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]
}
}
]
})

不需要理解这些数据代表什么，只需意识到您正在注入一个值为{ separatorKeyCodes: [ENTER, COMMA] }的令牌MAT_CHIPS_DEFAULT_OPTIONS

这将从你的AppModule继承，或者从你定义的任何模块或组件继承——就像任何其他可注入服务一样。这同样可以在@Component或@Directive定义中，只为单个组件(及其子组件)提供配置。

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

老实说，这样做似乎很痛苦，而不仅仅是在零部件上设置值，但这是许多"角度材质"控件的工作方式。当然，好处是你只做一次，一切都会继承它