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

Question

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

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

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

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

这应该与上面前面的例子中应用dir1和dir2完全相同，即它将在其类中硬编码值"red"和123。

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

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

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

请帮助，谢谢！

Answer 1

更新：仍然不可能在2018年9月。这是Angular团队的功能积压。在这里跟进进展https://github.com/angular/angular/issues/8785

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

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

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

我做的是，我只是创建了两个new Dir1 / Dir2对象传递在MyDir的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和MyDir，例如，

ngAfterContentInit() {
  this.d1.ngAfterContentInit();
  this.d2.ngAfterContentInit();
}