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 ，那么會不會有問題呢？我們馬上來實踐一下。

Custom Events

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); }}