Angular 2 在指令类中获取所有相同类型的指令答案

【问题标题】：Angular 2 get all directives of the same type inside the directive classAngular 2 在指令类中获取所有相同类型的指令
【发布时间】：2017-01-20 08:44:20
【问题描述】：

我正在尝试在我的一个指令上实现活动状态，以便只要在指令实例中将isActive 设置为true，具有该指令的元素就会获得一个active 类。

问题是我似乎在任何给定时间都无法获取超过 1 个指令，这似乎也是获取其他指令的同一元素。

export class ModalOpenDirective {
  @ContentChildren(ModalOpenDirective) modalOpenDirectives: QueryList<ModalOpenDirective>;
  @Input() modalId: string;
  @Input() modalTemplate: string;

  public modalOpen: string;

  constructor(private modalApi: ModalApiService) {}

  @HostListener('click')
  open(): void {

    this.modalApi.open(this.modalId, this.modalTemplate);

    this.toggleActiveClass();
  }

  @HostBinding('class.active')
  isActive: boolean;

  toggleActiveClass(): void {

    this.modalOpenDirectives.map((directive) => {
      directive.isActive = false;
    });

    console.log(this.modalOpenDirectives);

    this.isActive = true;
  }
}

我怎样才能确保它选择了所有其他相同类型的指令？我很确定 @ContentChildren 是可行的方法，但它似乎不起作用。

编辑：我是这样使用它们的：

<button modalOpen modalId="test1">Open modal nr 1</button>
<button modalOpen modalId="test2">Open modal nr 2</button>   
<button modalOpen modalId="test3">Open modal nr 3</button>

所以当modalOpen 和modalId="test1" 被触发时，该按钮应该获得active 类，而所有其他按钮都应该失去它们的类。

【问题讨论】：

ContentChildren 很好。您能否说明指令的应用位置以及它们如何传递给ModalOpenDirective？
我认为您需要确定单击了哪个元素。 ContenChildren with QueryList 将为您提供该指令的所有实例。您需要过滤掉它以获得正确的实例。但我想 plunkr 需要看看到底发生了什么。
@micronyks 它只会自己拾起，所以目前这不是问题。但我想冈特说得很有道理。我认为我必须创建一个包装器指令。
冈特是对的。但我只是想知道如何发送 modalId 和 Guanter 的答案。

标签： angular typescript angular2-directives

【解决方案1】：

modalOpen 只包含一个元素，因此ContentChildren 只返回一个。

如果你把它改成

<div modalOpen>
  <button modalId="test1">Open modal nr 1</button>
  <button modalId="test2">Open modal nr 2</button>   
  <button modalId="test3">Open modal nr 3</button>
</div>

ContentChildren 将返回 3 个元素。

这不会将modalId 传递给modalOpen。

【讨论】：