Angular - 使用者輸入

在 Angular 中，您可以利用 HTML 的 DOM 元素結構在執行時更改元素的值。讓我們詳細瞭解一些內容。

輸入標籤

在 app.component.ts 檔案中放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

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

• [value] = ”username” - 用於將表示式 username 繫結到輸入元素的 value 屬性。

• (input) = ”expression” - 這是將表示式繫結到輸入元素的 input 事件的宣告方式。

• username = $event.target.value - 當 input 事件觸發時執行的表示式。

• $event - 是 Angular 在事件繫結中公開的表示式，其值為事件的有效負載。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

您現在可以鍵入任何內容，並且相同的輸入將反映在輸入控制元件旁邊的文字中。

點選輸入

在 app.component.ts 檔案中放置以下程式碼。

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

當您點選“點選我”按鈕時，您將獲得以下輸出。