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

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'; 
}

查看Plunker

希望这会有所帮助！