Angular 2组件标签绑定(click)事件咨询：嵌套组件场景实现

嘿，我来给你捋清楚Angular 2里怎么在组件标签上绑定click事件，分两种常用的方式，你可以根据自己的场景选择：

方式一：直接绑定原生DOM事件 #

Angular默认会把组件标签上的(click)当成组件的输出属性来解析，如果想直接绑定组件根元素的原生click事件，需要给事件名加上.native修饰符。

比如在你的my-list-comp.html里，直接这么改：

<div class="list"> 
  <ul><!-- some stuff --></ul> 
  <my-button-comp (click.native)="onButtonClicked()"></my-button-comp> 
</div>

然后在my-list-comp.component.ts里定义对应的处理方法：

onButtonClicked() {
  console.log("按钮组件被点击啦");
  // 这里写你的业务逻辑
}

这种方式比较直接，但缺点是依赖组件的根DOM元素类型，不够灵活，也不符合组件封装的最佳实践。

方式二：通过组件输出属性绑定（推荐） #

这是Angular组件通信的标准方式，让按钮组件自己暴露一个点击事件，父组件再绑定这个事件，更符合组件封装的原则。

步骤1：在按钮组件中定义输出属性 #

打开my-button-comp.component.ts，导入Output和EventEmitter，然后定义一个输出属性：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button-comp',
  templateUrl: './my-button-comp.html'
})
export class MyButtonCompComponent {
  // 定义输出属性，名字可以自己取，比如叫buttonClick
  @Output() buttonClick = new EventEmitter<void>();
}

步骤2：在按钮组件模板中触发事件 #

在my-button-comp.html里，给实际的按钮标签绑定原生click事件，触发我们定义的输出属性：

<button (click)="buttonClick.emit()">点击我</button>

步骤3：在父组件中绑定组件的输出事件 #

回到my-list-comp.html，现在可以直接绑定按钮组件暴露的buttonClick事件了：

<div class="list"> 
  <ul><!-- some stuff --></ul> 
  <my-button-comp (buttonClick)="onButtonClicked()"></my-button-comp> 
</div>

同样在my-list-comp.component.ts里定义onButtonClicked方法即可。

这种方式的好处是，按钮组件内部的DOM结构变化（比如把button换成a标签），不会影响父组件的事件绑定，耦合度更低，也更符合Angular的设计理念。

内容的提问来源于stack exchange，提问作者webta.st.ic