我有一个具有组件级提供程序的 Angular 组件。
@Component({
selector: 'storybook-di-component',
templateUrl: './di.component.html',
providers: [{ provide: TEST_TOKEN, useValue: 123 }],
})
export class DiComponent {
@Input()
title: string;
constructor(
protected injector: Injector,
protected elRef: ElementRef,
@Inject(TEST_TOKEN) protected testToken: number
) {}
在这种情况下,我如何让故事书注入不同的提供者,以便我可以提供替代/模拟服务?例如,在上面的 DiComponent 中,如果我想注入{ provide: TEST_TOKEN, useValue: 456 }
呢?
真实世界的用例是我正在使用 ngrx/component-store 并且需要为组件提供一个虚拟的、预填充的存储。
(附加信息:)在模块级别(如下所示)注入它不起作用,因为组件仍在运行并创建它自己的提供者实例:
moduleMetadata: {
providers: [
{ provide: StateStore, useValue: stateStore }
],
imports: [...],
},