在 Angular 中注入多个实例

Question

我正在尝试将实例列表注入到我的 Angular 组件中，但由于它不起作用并且我找不到任何相关文档，我认为这可能是不可能的。因此，在这种情况下，我的问题是如何以干净的方式实现相同的效果，而无需手动连接任何东西。

例如，在 Spring 中，我将有一些从抽象Action类扩展或实现Action接口的具体操作。

@Component
class MyAction1 extends Action {
   ...
}

@Component
class MyAction2 extends Action {
   ...
}

@Component
class MyConsumer {
    @Autowired
    List<Action> actions;
}

由于MyAction1和MyAction2是在运行时加载的，MyConsumer因此其列表将填充 2 个实例。有什么方法可以在 Angular 中做到这一点而无需手动连接吗？

编辑： 在角度代码中我想要的是：

export abstract class ActionBase {
...
}

@Injectable()
export class MyAction1 extends ActionBase {
...
}

@Injectable()
export class MyAction2 extends ActionBase {
...
}

@Component(...)
export class MyConsumerComponent {
    constructor(
        private availableActions: ActionBase[]
    ) { }
}

我希望 MyConsumerComponentavailableActions在初始化时能够在内部包含两个操作。

干杯

Answer 1

这个人解释了如何使用更优雅的方式对同一合约进行多次注入。您的提供者中的属性multi发挥了魔力！

https://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html#other-multi-providers

只需要更改OpaqueToken新课程InjectionToken和您的描述。

一个例子：

export const MY_TOKEN = new InjectionToken<Contract[]>('my-token');

@NgModule({
  providers: [
    { provide: MY_TOKEN, useClass: OneContract, multi: true},
    { provide: MY_TOKEN, useClass: TowContract, multi: true},
    { provide: MY_TOKEN, useClass: ThreeContract, multi: true},
  ]
})
export class MyModule { }

在你的Component或中Service：

@Injectable({ providedIn: 'root'})
export class MyService
{
  constructor(@Inject(MY_TOKEN) private readonly contracts: Contract[]) {}
}