假设有两个预定义的指令dir1
和dir2
(由第三方API提供,用户无法控制),假设它们可以应用于html元素,如下所示:
<div dir1="red" [dir2]="123">... My Content ...</div>
我发现自己在代码的几个地方使用了完全相同的绑定值来应用上述指令。为了避免重复,我想创建自己的自定义指令,命名为myDir
,我可以这样应用它:
<div MyDir >... My Content ...</div>
这应该与在上面的示例中应用dir1
和dir2
* 完全 * 相同,即它将在其类中硬编码值"red"
和123
。
我尝试过像下面的plunker示例那样设置主机绑定,但这不起作用。
我的一个想法是,如果只有typescript有多个继承,那么我只需将MyDir
类编写为Dir1
* 和 * Dir2
的扩展。
我的问题是如何编写定制指令(MyDir
)来实现预期用途?
请协助,谢谢!
https://plnkr.co/edit/W20Wvew326qsGfPU5H6v
2条答案
按热度按时间lb3vh1jj1#
**更新:**在2020年5月仍然不可能。它在Angular Team的特性积压工作中。在这里关注进展https://github.com/angular/angular/issues/8785
(TL; DR。有关我的黑客解决方案,请参见Plunker here)
下面是我对这个问题的解决方案,如上所述。注意,这不是最通用的解决方案;在其他情况下,它的适应性很大程度上取决于所涉及指令的公共API的外观。当要组合的指令至少有
ElementRef
作为注入依赖项之一时,它应该能很好地工作,例如:如果指令负责更改元素的样式,则很可能是这种情况。
我所做的就是,创建两个
new
Dir1
/Dir2
对象,传入MyDir
的ElementRef
作为Dir1
/Dir2
的上下文,如下所示:然后,我将
d1
/d2
的公共属性(@Input
绑定)设置为我需要它们永久保持的值(以避免重复自己的操作):接下来,我所要做的就是将公共方法
d1
/d2
与MyDir
进行匹配,方法是在后者的相应方法中调用前者的方法,例如:这是把这些拼凑在一起的活塞
kuuvgm7e2#
从Angular 15开始,您可以使用Directive composition API。您需要的是将指令添加到另一个指令
您的示例如下: