在 Angular 中使用 @Input()

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 中的 @Input() 指令
  2. 在 Angular 應用程式中使用 @Input() 的步驟
在 Angular 中使用 @Input()

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

Angular 中的 @Input() 指令

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

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

@Input() 指令具有三個屬性:typenamevalue

  • 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() 需要三個步驟:

  • @Input() 新增到 HTML 元素。
  • ng-model 屬性新增到要與輸入繫結的元素。
  • 為控制器中的 ng-model 屬性分配一個表示式。

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>

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

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Input