Question

假设有两个预定义指令dir1和dir2（由第三方API提供，而无法控制）。假设这些可以应用于html元素，如下所示：

<div dir1="red" [dir2]="123">... My Content ...</div>

我发现自己在我的代码中的几个地方使用完全相同的绑定值应用上面的指令。而不是重复自己，我想创建我自己的自定义指令，称之为myDir，我可以像这样应用：

<div MyDir >... My Content ...</div>

这应该完全与应用dir1和dir2相同，就像上面的例子一样，即它将具有值"red"和{{1在它的类中硬编码。

我已尝试设置主机绑定，如下面的plunker示例所示，但这不起作用..

我的一个想法是，如果只有打字稿有多重继承，那么我只需将123类写为MyDir 和 Dir1的扩展名。

我的问题是如何编写自定义指令（Dir2）以实现预期用途？

请帮助，谢谢你！

https://plnkr.co/edit/W20Wvew326qsGfPU5H6v

Answer 1

更新：在2018年9月仍然无法实现。这是Angular Team的功能积压。在此处关注进度https://github.com/angular/angular/issues/8785

（TL; DR。对于我的黑客解决方案，请参阅Plunker here）

以下是最终成为我解决问题的方法，如上所述。请注意，这不是最通用的解决方案;在其他情况下，它的适应性很大程度上取决于所涉及的指令的公共API是什么样的。它应该可以很好地处理要组合的指令至少有ElementRef作为注入依赖项之一，如：

constructor(private elRef: ElementRef, /*...*/) { /*...*/ }

如果指令负责更改元素的样式，则可能就是这种情况。

我做的是，我只创建了两个new Dir1 / Dir2个对象，这些对象在MyDir的{{1}}中作为{{1}的上下文传递} / ElementRef就像这样：

Dir1

然后我将Dir2 / // inside MyDir constructor this.d1 = new Dir1(this.elRef, /*...*/); this.d2 = new Dir2(this.elRef, /*...*/);的公共属性（@Input绑定）设置为我需要永久存在的值（以避免重复自己）：

d1

接下来，我必须尝试做的就是将公共方法d2 / //inside MyDir constructor this.d1.dir1 = "red"; this.d2.dir2 = 123;与d1匹配，方法是在后者的相应方法中调用前者的方法，例如

d2

这是所有拼接在一起的龙头 https://plnkr.co/edit/TCagW8vOPrqSiOT9Oztf

将两个指令合并为一个指令

1 个答案:

（TL; DR。对于我的黑客解决方案，请参阅Plunker here）