【问题标题】:How to inject directive of subclass into component如何将子类的指令注入组件
【发布时间】:2021-04-18 19:27:51
【问题描述】:

我有一个组件应该根据添加到元素的指令来改变其行为。此自定义逻辑在指令中定义,因此在添加新范围/功能时无需修改组件。

MyComponent
MyDirectiveBase
MyDirective1 extends MyDirectiveBase
MyDirective2 extends MyDirectiveBase

在组件构造函数中,我想注入应用于元素的指令。当我知道将使用的确切类时,我可以毫无问题地执行此操作,但我想要的是从 MyDirectiveBase 扩展的任何指令。

如何让 DI 框架允许 MyDirectiveBase 的所有子类?

我尝试过使用注入令牌(multi=true),但这只是给了我一个类/函数数组,而不是元素实例。此外,如果未指定属性,则不应注入任何指令。

示例回购: https://github.com/ulvesked/angular-dependency-inject-directive-subclass-to-component

StackBlitz:https://stackblitz.com/edit/angular-ivy-bihzjv?devtoolsheight=33&file=src/app/app.component.html

【问题讨论】:

  • 我太累了,无法写出实际的答案——这里正在使用 stackblit:stackblitz.com/edit/angular-ivy-up2khd 阅读 Angular 中的 DI——尤其是 InjectionToken。很抱歉没有写出完整的答案。
  • 谢谢。我已经阅读了有关 Injection 令牌的信息,但显然还不够。这很有帮助!

标签: angular angular-directive angular-dependency-injection


【解决方案1】:

这是一个示例。

https://stackblitz.com/edit/angular-ivy-tnb5up

基本思想是让每个指令为基本类MyGreetingDirective提供实现类。所以 HelloComopnent 可以根据你的属性从 Angular DI 中获取不同的指令实例。

【讨论】:

  • 这部分按预期工作。正确的类被注入到组件中,但是指令被实例化了两次,因为在构造函数和模板中使用了不同的注入标记。模板使用 MyFormalGreeting,组件构造函数使用 MyGreeting。它解析为相同的类,但不同的实例。检查此链接上的控制台输出stackblitz.com/edit/…
  • 您可以将useClass 更改为useExist。它将确保使用您已经存在的指令实例。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-04
  • 2016-04-05
  • 2016-02-08
  • 2020-01-12
  • 2016-09-14
相关资源
最近更新 更多