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 示例

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

Answer 2

编辑：使用 [( )] 进行双向绑定。 通过此语法，对 DOM 的任何更改都将在您的组件中可用

html：

<a myLink [(class)]="status">A link </a>

在您的组件类中：

private status: String;
...

if (status=='active') {
   //the class is active
}else{//class is something else
}

原来的：

通常，您通过组件中的逻辑分配类。 我建议你回顾一下你的方法，看看你是否可以做这样的事情：

在您的组件类中：

private status: String;
...

if (condition) 
this.status = "active"
else 
this.status = ""

html：

<a myLink [class]="status">A link </a>

希望能帮助到你