标签：事件 结构 next click 控制台 angular4 output his this
Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-(eventName)="expression":
<button (click)="onClick()">Click</button>
DOM元素
DOM 元素触发的一些事件通过 DOM 层级结构传播，事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素，这种传播过程称为事件冒泡。
DOM事件冒泡与Angular可以无缝工作，具体示例如下：
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘exe-app‘,
template: `
<div (click)="onClick()">
<button>Click</button>
</div>
`
})
export class AppComponent {
onClick() {
console.log(‘Click‘);
}
}
以上代码成功运行后，当用户点击 Click 按钮，浏览器控制台将会输出：
Click
即表示 <div> 元素上设置的监听函数被执行，也间接证明了事件冒泡能正常工作。
Angular Component
Angular 允许开发者通过 @Output() 装饰器和 EventEmitter 自定义事件。它不同于 DOM 事件，因为它不支持事件冒泡。
首先来看一下自定义组件如何监听DOM事件：
event-bubbling.component.ts
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘event-bubbling‘,
template: `
<div>
<button>Click</button>
</div>
`
})
export class EventBubblingComponent { }
app.component.ts
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘exe-app‘,
template: `
<div>
<event-bubbling (click)="onClick()"></event-bubbling>
</div>
`
})
export class AppComponent {
onClick() {
console.log(‘Click‘);
}
}
以上代码成功运行后，当用户点击 Click 按钮，浏览器控制台也会输出 Click。表示我们的自定义组件，也是可以正常处理组件内元素触发的 click 事件。但当我们在自定义组件中创建自定义事件时，事件名称也是使用 click ，那么会不会有问题呢？我们马上来实践一下。
event-bubbling.component
import { Component, Output, EventEmitter } from ‘@angular/core‘;
@Component({
selector: ‘event-bubbling‘,
template: `
<div>
<button (click)="onClick(‘Button 1‘)">Button 1</button>
<button (click)="onClick(‘Button 2‘)">Button 2</button>
</div>
`
})
export class EventBubblingComponent {
@Output() click = new EventEmitter();
onClick(button: string) {
this.click.next(button);
}
}
app.component.ts
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘exe-app‘,
template: `
<div>
<event-bubbling (click)="onClick($event)"></event-bubbling>
</div>
`
})
export class AppComponent {
onClick(event: any) {
console.log(event);
}
}
以上代码成功运行后，当用户点击 Button 1 按钮时，浏览器控制台将会输出：
Button 1 MouseEvent {isTrusted: true, screenX: 69, screenY: 161, clientX: 43, clientY: 22…}
Angular4.x Event (DOM事件和自定义事件)
标签：事件 结构 next click 控制台 angular4 output his this
原文地址：http://www.cnblogs.com/xuepei/p/7792556.html
