在 Angular 2 中对类/ID 执行事件答案

【问题标题】：Perform Events on Class/Ids in Angular 2在 Angular 2 中对类/ID 执行事件
【发布时间】：2017-09-23 08:18:44
【问题描述】：

我完全是 Angular2 的新手。我的问题是如何在相同的类上执行常见事件，在 Jquery 中这样做很容易，但我无法找到在 Angular2 中实现它的方法。例子是：

<input class="perform" value="Hello Angular" />
<input class="perform" value="Hello World" />

Jquery 代码：

$('document.body').on('click','.perform', function(){
console.log("Value-->"+$this.value);
});

但是我们如何在 Angular2 中实现同样的功能。请帮忙。

【问题讨论】：

这里有一个帖子试图做同样的事情。 stackoverflow.com/questions/46370628/…

标签： angular

【解决方案1】：

您可以像在 jQuery 中一样使用元素引用来获取元素，然后像在 jquery 中那样添加事件监听器。

示例

<input class="perform" value="Hello Angular" (click)="makeClick($event)" />
<input class="perform" value="Hello World"  (click)="makeClick($event)"/>

在您的组件中，您可以有一个方法来处理该事件

makeClick(event: any) {
  //this is where you handle the event
}

如果您需要做一些与样式相关的事情，您也可以这样做，但不确定单击是否适用于查询选择器。

   this.elementRef.nativeElement.querySelector('.perform').style.display = cancelEdit ? 'flex' : 'none';

【讨论】：

但为此我必须为所有输入元素绑定（单击）事件，我不想这样做。有没有其他办法。
尝试查看查询选择器上是否有任何事件绑定。查看所有可用的方法。 this.elementRef.nativeElement.querySelector('.perform')
我不记得 Angular 中还有什么其他内容

【解决方案2】：

创建指令（注意selector 可以是任何有效的css选择器语句，不一定是简单属性）

@Directive({
    selector: [myKoolClickHandler]
})
export class MyKoolClickHandlerDirective{
    constructor(){}

    @HostListener('click') onClick() {
        console.log("clicked");
    }
}

//in template
<div my-kool-click-handler>Hi!</div>
<div my-kool-click-handler>Hi again!</div>

【讨论】：