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

我有一个指令，我想检测是否将

x

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

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

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

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

---

但毫不奇怪，它不起作用。如何使用

主机侦听器或任何其他方式执行此操作？
编辑：使用[（）]进行双向绑定。通过此语法，对DOM的任何更改都将在组件中可用

html:

原件：

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

在组件类中：

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:

链接

希望它有帮助
@HostListener（）
仅用于事件

您可以像这样使用
ngDoCheck

导出类MyClass实现DoCheck{
构造函数（私有elRef:ElementRef）{
log（'myClass'）；
}
ngDoCheck（）{
log（'classList:'+this.elRef.nativeElement.classList）；
}
}


另请参见
该类添加了外部框架，我不想手动更改它。我想知道它是什么时候添加的。Semantic-ui、bootstrap等。所有这些框架都可以操作DOM元素。但我认为这只会在一开始起作用，那么我应该如何检查这些元素的更改？我想你还需要一些咖啡：）你没有更改
ngDoCheck
的内容，该函数中没有名为
value
的变量：）我从plunker中执行了相同的操作，当在指令内部对类进行更改时，它会打印我的
classlist
。但是，当我切换侧栏（使用语义UI btw）并
semantic.js
更改其类时，它不会检测到更改，也不会打印任何内容。但我认为这是另一个问题，我应该接受这个答案。非常感谢你！是的，我在Plunker中有正确的代码，不正确的代码被注释掉，并将不正确的代码放入问题中。我假设语义UI的问题是，它不会导致Angulars更改检测运行。若语义UI在Angulars区域之外运行，Angular就不会意识到它应该在代码执行后运行更改检测。我不知道语义用户界面，也不知道如何将其与Angular集成。如果未运行更改检测，Angular不会调用
ngDoCheck（）
或任何其他代码。我认为您是对的。语义UI尚未与Angular2集成，我正在尝试手动集成所需的组件。
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 = ""

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