title: Angular 事件
date: 2017-09-07 10:00
categories: Training
keywords:

• Angular
• Output
• EventEmitter
• Event
  tags:
• Angular
• Output

事件 (EventEmitter)

事件繫結 (Event Binding)

事件(Event) 可以說是一種狀態的描述，它提供一個主動通知的機制，讓我們可以在發生的當下去做一些額外的處理，例如：按下按鈕，這應該是我們最常用了事件，在點擊按鈕後我們可能儲存目前資訊、切換目前頁面、顯示額外訊息…等等。

在 Angular UI：標題列 我們從官方範例一起複製了一段代碼-(click)="sidenav.open()"，看起來就像是點擊事件，但是又跟 DOM 的點擊事件(onclick)比起來少了最前面的 on 多了小括弧。

Angular 內建透過指令(Directive)方式產生了相對應 DOM 事件的 偽事件 (不是正確觀念，但是這樣說好像比較好理解)， 它本身會去監控 DOM 的事件，當 DOM 事件觸發時在去觸發對應的 偽事件，初期我們可以直接把它當作 DOM 事件來看待，只是寫法上稍做調整。
小括號 其實是 Angular 單向繫結(事件繫結)的語法，透過繫結方式讓 前端樣板(xxx**.component.html**) 的變化( 偽事件的觸發) 可以反應回 後端元件(xxx**.component.ts**)。

建立自訂事件

我們在 src\app\home\header\header.component.ts 內宣告一個事件觸發器(EventEmitter)，並透過 @Output() 這個裝飾器將它提供給外部引用，並建立一個 sidenav_click 方法來觸發 EventEmitter。

@Output() 可以加入別名參數，外部會引用到此別名，它會直接對應到原本的參數，預設別名與參數相同，一般除非是特別規畫過，否則直接使用預設值在維護上會比較方便。

{% codeblock header.component.ts lang:ts %}
import { Component, OnInit, Output, EventEmitter} from ‘@angular/core’;

@Component({
selector: ‘app-header’,
templateUrl: ‘./header.component.html’,
styleUrls: [‘./header.component.scss’]
})
export class HeaderComponent implements OnInit {
@Output() sidenavClick = new EventEmitter();

constructor() { }

ngOnInit() {
}

sidenav_click() {
this.sidenavClick.emit(null);
}
}

{% endcodeblock %}

開啟 src\app\home\header\header.component.html 將 menu 按鈕複製過來，將 click 改連結到 sidenav_click 方法，這樣 HeaderComponent 就多了一個 sidenavClick 的事件。

{% codeblock header.component.html lang:html %}

<button md-icon-button (click)=”sidenav_click()” fxHide fxShow.xs>
menu

Angular demo


home


settings_input_component


info

{% endcodeblock %}

開啟 src\app\home\home.component.html，移除 menu 按鈕，並將 sidenav.open() 繫結至 HeaderComponent 的 sidenavClick。

{% codeblock home.component.html lang:html %}

{% endcodeblock %}

以手機尺寸執行瀏覽器查看結果。

同樣方式我們在 AsideComponent 元件內建立一個 menuClick 事件，並讓它在點選功能選單時觸發。

{% codeblock aside.component.ts lang:ts %}
import { Component, OnInit, Output, EventEmitter } from ‘@angular/core’;

@Component({
selector: ‘app-aside’,
templateUrl: ‘./aside.component.html’,
styleUrls: [‘./aside.component.scss’]
})
export class AsideComponent implements OnInit {
@Output() menuClick = new EventEmitter();

constructor() { }

ngOnInit() {
}

menu_click() {
this.menuClick.emit(null);
}
}

{% endcodeblock %}

{% codeblock aside.component.html lang:html %}

員工專區

{% endcodeblock %}

開啟 src\app\home\home.component.html，將 sidenav.close() 繫結至 AsideComponent 的 menuClick。

{% codeblock home.component.html lang:html %}

{% endcodeblock %}

重新執行瀏覽器查看結果，現在點選功能選單時 sidenav 就會自己藏起來，整體效果應該跟一般手機APP操作差不多了。

{% img /images/download.png 36 %}first-app_2017-09-07.zip