Question

我正在尝试在我的某个指令上实现一个活动状态，这样当active设置为isActive时，包含该指令的元素就会获得true类在指令实例中。

问题在于，我似乎无法在任何给定时间获取超过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类，所有其他按钮都会失去它们。

Answer 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。

Angular 2在指令类

1 个答案: