将函数绑定到类中所有元素的事件的角度方式

Question

使用 jquery，我们可以做类似的事情

$(.some-class).click(function() { alert('Hello!!');});

使用Angular2/Angular4，我知道我们可以拥有

(click)="alert('Hello!!');" 

但这意味着，我必须为每个元素执行此操作。

有没有办法将相同的方法分配给具有相同类的所有元素？

编辑：我不想按类选择元素，而是将相同的函数绑定到具有相同类的所有元素的单击事件。

Answer 1

你可以像下面这样做，

import { Component, Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '.some-class'
})
export class SomeClassDirective {
  constructor(private el: ElementRef) { }
  @HostListener('click') onClick() {
    console.log('Hello');
  }
}
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <div class='some-class' >added some-class css class attribute</div>
  `
})
export class AppComponent { 
  name = 'Angular'; 
}

检查这个普伦克

希望这有帮助！！