如何检查同一元素上是否存在另一个指令

Question

假设我有两个指令：

@Directive({
  selector: '[appDirective1]'
})
export class Directive1Directive {

  public alone = true;

  constructor(private element: ElementRef<HTMLInputElement>) { }

  ngOnInit() {
    if (this.alone) {
      this.element.nativeElement.innerHTML = "I am alone";
    } else {
      this.element.nativeElement.innerHTML = "I have a friend";
    }
  }
}

@Directive({
  selector: '[appDirective2]'
})
export class Directive2Directive {

  constructor() { }

}

Directive1如果Directive2存在于同一元素上，我想更改其行为。例如，这些应该有不同的行为。

<div appDirective1></div>
<div appDirective1 appDirective2></div>

我是否可以在不添加服务以促进通信的情况下执行此操作*？

StackBlitz 示例：https ://stackblitz.com/edit/angular-bgqd15

---

*我想避免为此创建新服务，因为这感觉有点矫枉过正。

Answer 1

您可以使用Host()装饰器通过构造函数注入相邻指令，并使其成为Optional()

  constructor(@Optional() @Host() public friend: Directive2Directive) { }

  ngOnInit() {
    if (this.friend) {
      this.element.nativeElement.innerHTML = "I have a friend";
    } else {
      this.element.nativeElement.innerHTML = "I am alone";
    }
  }

组件、指令和提供程序是可注入的，您可以将 DI 限制为仅在当前主机级别进行搜索。