如何将子类的指令注入组件
How to inject directive of subclass into component
我有一个组件应该根据添加到元素的指令改变其行为。此自定义逻辑在指令中定义,因此在添加新 scope/feature 时无需修改组件。
MyComponent
MyDirectiveBase
MyDirective1 extends MyDirectiveBase
MyDirective2 extends MyDirectiveBase
在组件构造函数中,我想注入应用于元素的指令。当我知道将要使用的确切 class 时,我可以毫无问题地执行此操作,但我想要的是从 MyDirectiveBase.
扩展的任何指令
如何告诉 DI 框架允许 MyDirectiveBase 的所有子classes?
我曾尝试使用注入令牌(multi=true),但这只是给了我一个 classes/functions 的数组,而不是元素实例。此外,如果未指定属性,则不应注入任何指令。
样本回购:
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
这是一个示例。
https://stackblitz.com/edit/angular-ivy-tnb5up
基本思想是让每个指令都提供基本 class MyGreetingDirective
并实现 class。所以 HelloComopnent 可以根据你的属性从 Angular DI 中获取不同的指令实例。
我有一个组件应该根据添加到元素的指令改变其行为。此自定义逻辑在指令中定义,因此在添加新 scope/feature 时无需修改组件。
MyComponent
MyDirectiveBase
MyDirective1 extends MyDirectiveBase
MyDirective2 extends MyDirectiveBase
在组件构造函数中,我想注入应用于元素的指令。当我知道将要使用的确切 class 时,我可以毫无问题地执行此操作,但我想要的是从 MyDirectiveBase.
扩展的任何指令如何告诉 DI 框架允许 MyDirectiveBase 的所有子classes?
我曾尝试使用注入令牌(multi=true),但这只是给了我一个 classes/functions 的数组,而不是元素实例。此外,如果未指定属性,则不应注入任何指令。
样本回购: 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
这是一个示例。
https://stackblitz.com/edit/angular-ivy-tnb5up
基本思想是让每个指令都提供基本 class MyGreetingDirective
并实现 class。所以 HelloComopnent 可以根据你的属性从 Angular DI 中获取不同的指令实例。