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

【问题标题】：Consolidating Two Directives into a Single One将两个指令合并为一个指令
【发布时间】：2017-05-27 20:33:33
【问题描述】：

假设一个有两个预定义的指令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) 以实现预期用途？

请协助，谢谢你！

【问题讨论】：

如果目标是您的指令添加导致其他指令被添加的属性，那么这将不起作用。 Directives are only added when the selector matches statically added HTML.无法动态添加指令。我也不知道另一种方法，除了在一个指令中重新实现其他 2 个指令的功能。

【解决方案1】：

更新： 2020 年 5 月仍然不可能。它在 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,  /*...*/);

然后我将d1/d2 的公共属性（@Input 绑定）设置为我需要它们永久的值（以避免重复自己）：

//inside MyDir constructor
this.d1.dir1 = "red";
this.d2.dir2 = 123;

接下来，我所要做的就是通过在后者的相应方法中调用前者的方法来匹配公共方法 d1/d2 和 MyDir，例如

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

【讨论】：