事件繫結
  

 前面的繫結都是按照 ： 元素到元件的方式
    但是在一個頁面不可能只是資料展示給使用者，而使用者對頁面沒有任何操作，不能進行和頁面的互動操作，在與用的互動操作時，怎麼才能知道使用者進行了怎麼樣的操作和互動呢？
    這個時候，就用到了各種事件，如按下鍵盤某一個按鍵，點選了某一滑鼠和觸控式螢幕。Angular中可以通過 Angular 事件繫結來宣告對哪些使用者動作感興趣。
    事件繫結語法由等號左側帶圓括號的目標事件和右側引號中的模板語句組成。

    例如：在一個button上繫結一個點選事件：

<button (click)="onSave()">Save</button>

    在這裡button的標籤中，
        1.在等號（=）左邊的是把按鈕的點選事件作為繫結的目標，在工作用，有些會加上on-的字首，這樣使整個程式碼更規範。

<button on-click="onSave()">On Save</button>

    元素事件可能是更常見的目標，但 Angular 會先看這個名字是否能匹配上已知指令的事件屬性，就像下面這個例子：
    

<div (myClick)="clickMessage=$event" clickable>click with myClick</div>

    當如果這個指令沒有被Angular找到，Angular就會報錯，提示有未知的指令的錯誤。

        2.在等號（=）右邊的是事件繫結的事件的具體方法，這個具體的方法是寫在類檔案（TS檔案）中的，點選這個事件所進行的操作和處理的邏輯在這個方法中實現，在這個，此時就形成了，當用戶點選某個按鈕或者某個頁面中的元素的時候，就會進行相應的互動。

$event 和事件處理語句

在事件繫結中，Angular 會為目標事件設定事件處理器。

    當事件發生時，這個處理器會執行模板語句。 典型的模板語句通常涉及到響應事件執行動作的接收器，例如從 HTML 控制元件中取得值，並存入模型。
    繫結會通過名叫 $event 的事件物件傳遞關於此事件的資訊（包括資料值）。
    事件物件的形態取決於目標事件。如果目標事件是原生 DOM 元素事件， $event 就是 DOM 事件物件，它有像 target 和 target.value 這樣的屬性。
    例如：

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >

    通過上面的程式碼，是將輸入框的value屬性繫結到了name屬性上，要監聽對input這個控制元件值的修改，程式碼繫結到輸入框的input事件。當用戶對控制元件造成更改的時候，input的事件就會被觸發，並在包含DOM事件物件（$event）的上下文中執行這條語句。需要更新name屬性，就要通過路徑 $event.target.value來獲取更改後的值，如果事件屬於指令，那麼$event具體是什麼，就由具體的指令去決定了。使用 EventEmitter 實現自定義事件
    通常情況下，Angular可以使用EventEmitter來觸發自定義的事件，這個通常用在父元件和子元件傳輸值的時候會用到。指令建立一個 EventEmitter 的例項，並且把它作為屬性暴露出來，指令呼叫EventEmitter的emit(需要傳入的值或者任何東西)方法，來觸發事件，這個時候可以穿入任何東西，作為事件觸發的載荷。父元件的指令繫結到這個屬性來監聽事件，並通過$event物件來訪問前面EventEmitter的emit方法中傳入的值或者任何東西。

定一個EventEmitter

testEvent = new EventEmitter<any>();

向自定義EventEmitter中傳入（值或者任何東西）

this.testEvent.emit(值/任何東西);

在模版中，通過$event去獲取testEvent中存在的值或者任何東西

(testEvent)="getEvent($event)"

在類檔案中：

getEvent(event){
    console.log(event);  // 此時的event就是在EventEmitter中寸的值或者任何東西
}