如何将click事件绑定到角度为2的整个组件（aka：host）

Question

我有一个容器组件ContainerComponent，其中包含一些子项ChildComponent，并使用* ngFor

生成

ContainerComponent模板：

<div class="child" *ngFor="let child of children">
    <child [child]="child"></child>
</div>

ChildComponent模板：

<h2>{{child.name}}</h2>
<h2>{{child.data}}</h2>

对于ChildComponent，我定义了一个样式表，我可以使用:host（https://angular.io/docs/ts/latest/guide/component-styles.html）

访问整个组件正文

有了这个，我为ChildComponent创建了样式：

:host
{
    display: block;

    width: 400px;
    height: 300px;
}

现在我想在每个ChildComponent（整个组件）上绑定（单击）事件，并在ChildComponent类中捕获它。要做到这一点，我必须设置（点击）=＆＃34;方法＆＃34;属性 。

然而，在讨论事件时，我不喜欢像主人一样的东西。

我不想在ContainerComponent中绑定。

一种可能的解决方案是将整个组件包装在div中并将事件绑定到此div，但是我正在寻找更优雅的方式。

Answer 1

选项1：

在组件元数据中指定主机

中的单击处理程序

C

在组件中实现点击处理程序

host: {
   "(click)": "onClick($event)"
}

选项2：

使用HostListener为组件添加侦听器。

onClick(e) {
   console.log(e)
}