Question

使用class＆＃34; foo＆＃34;

来监听元素上的click事件的正确方法是什么？

<div>
    <p class="foo">Hi</p>
    <span class="foo">Hello</span>
    <p class="bar">Hey</p>
<div>
<div class="foo">
    <img src="..."/>
</div>

我认为这个版本有点脆弱：

<div>
    <p class="foo" (click)="bar()">Hi</p>
    <span class="foo" (click)="bar()">Hello</span>
    <p class="bar">Hey</p>
<div>
<div class="foo" (click)="bar()">
    <img src="..."/>
</div>

Answer 1

如果这是模板或模板的一部分：

<div>
    <p class="foo">Hi</p>
    <span class="foo">Hello</span>
    <p class="bar">Hey</p>
<div>
<div class="foo">
    <img src="..."/>
</div>

您可以为其创建@Directive()并将事件绑定到host属性：

import { Directive } from '@angular/core';

@Directive({
    selector : '.bar', // <---selects only .bar elements
    host:{
      "(click)":"bar()"
    }
})

export class BarDirective{

    bar(){
       console.log('clicked');
    }

}

还有其他装饰器也像@HostListener()，但它必须从@angular/core导入并在类块中绑定事件。

如何将事件绑定到Angular 2中具有特定类的元素？

1 个答案: