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

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>

希望有所帮助

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

2 个答案: