javascript - Angular2 - 检查是否使用@HostListener 将新类添加到指令中

Question

我有一个指令，我想检测 x 类是否添加到使用该指令的 DOM 元素中。例如，假设我有一个链接

<a myLink class="">A link</a>

然后，active 类从 javascript

添加到该元素

<a myLink class="active">A link</a>

我想在 MyLink 指令中检测这个类。我试过类似的东西

  @HostListener('class',['active'])
  onVisible(){
    console.log("Element active");
  }

但毫不奇怪，它不起作用。我如何使用 HostListener 或任何其他方式做到这一点？

Answer 1

@HostListener() 仅用于事件。

你可以像这样使用ngDoCheck

export class MyClass implements DoCheck {
  constructor(private elRef:ElementRef) {
    console.log('myClass');
  }

  ngDoCheck() {
    console.log('classList: ' + this.elRef.nativeElement.classList);
  }
}

Plunker example

另见 https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html