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