Angular 2 - 事件處理

在 Angular 2 中，可以很容易地處理按鈕點選或其他型別的事件。事件從 HTML 頁面觸發，併發送到 Angular JS 類進行進一步處理。

讓我們來看一個如何實現事件處理的例子。在這個例子中，我們將展示一個點選按鈕和一個狀態屬性。最初，狀態屬性為 true。當點選按鈕時，狀態屬性將變為 false。

步驟 1 - 將 app.component.ts 檔案的程式碼更改為以下內容。

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

關於以上程式碼，需要注意以下幾點：

• 我們定義了一個名為 status 的布林型變數，其初始值為 true。

• 接下來，我們定義了 clicked 函式，該函式將在我們的 HTML 頁面上的按鈕被點選時呼叫。在這個函式中，我們將 Status 屬性的值從 true 更改為 false。

步驟 2 - 對 app/app.component.html 檔案（模板檔案）進行以下更改。

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div> 

關於以上程式碼，需要注意以下幾點：

• 我們首先顯示類的 Status 屬性的值。

• 然後定義按鈕 HTML 標籤，其值為“點選”。然後，我們確保按鈕的 click 事件被觸發到我們類中的 clicked 事件。

步驟 3 - 儲存所有程式碼更改並重新整理瀏覽器，您將看到以下輸出。

步驟 4 - 點選“點選”按鈕，您將看到以下輸出。