在 Angular 中使用 @Input()

1. Angular 中的 @Input() 指令
2. 在 Angular 應用程式中使用 @Input() 的步驟

這篇文章是關於 Angular @Input()，Angular 中使用的一個函式，用於從使用者那裡獲取輸入，然後在程式中使用它進行處理。也可以使用此函式讀取檔案並從外部 API 獲取資料。

Angular 中的 @Input() 指令

顧名思義，@Input() 指令用於輸入欄位。 @Input() 最適合在表單欄位和文字框中捕獲使用者輸入。

當使用者輸入資訊時，它會自動更新欄位或文字框的值。它還接受來自其他輸入和 ngModelOptions 的值以自動更新其值。

@Input() 指令具有三個屬性：type、name 和 value。

• type 屬性指定要建立的輸入欄位型別。
• name 屬性指定輸入欄位的 id，並將在 JavaScript 程式碼中用作其名稱。
• 如果你建立未設定預設值的文字輸入欄位，則需要 value 屬性。

以下是輸入欄位的有效型別列表：

• Text
• Password
• Email Address
• Number
• Date Picker (Date)
• Time Picker (Time)
• Range Slider (Range)
• Checkbox (Checkbox)

要使用 @Input()，你需要將其作為指令新增到所需的 HTML 元素上。

@Input() 用於將資料從父元件傳輸到子元件，而@Output() 用於將資料從子元件傳遞到父元件。 @Input() 的一個典型例子是詢問使用者的年齡。

以下程式碼將顯示詢問使用者年齡的提示，然後將其返回給呼叫函式，呼叫函式將其分配給一個名為 age 的變數。

var age = Input("Please enter your age");

在 Angular 應用程式中使用 @Input() 的步驟

在 Angular 應用程式中使用 @Input() 需要三個步驟：

TypeScript 程式碼：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isFocusStyle = false;
    type = 'INFO';
    onFocus() {
        this.isFocusStyle = true;
        this.type = 'INFO';
    }
    onEnter() {
        this.isFocusStyle = false;
        const input = document.querySelector('input');
    }
}

HTML 程式碼：

<h1>Example of Angular Input</h1>
<div class="input-wrapper" [ngClass]="{'focus-style': isFocusStyle}">
    <input type="test" placeholder=" Write " (focus)="onFocus()">
</div>

點選這裡檢視上述程式碼的演示。