Angular 2+ 中的一次性資料繫結
在 Angular 2+ 中,一次性資料繫結僅在模型或任何輸入屬性發生更改時更新檢視。這種型別的資料繫結減少了對檢視的不必要更新,從而為你的計算機帶來更好的效能和更少的工作。
單向資料繫結的單向性是顯而易見的。你只能將資料從一個元件或檢視連結到另一個。
元件到檢視
幾種資料繫結策略採用單向資料繫結將資料從元件連線到檢視。
屬性繫結
此技術允許你將 HTML 元素的屬性繫結到模型中的物件屬性。它需要更改元件的屬性值並將該值包裝到同一檢視中的 HTML 元素。
對於成員之間的切換功能和資料交換,我們使用屬性繫結。
屬性繫結
使用這種技術,我們可以將 HTML 元素的屬性繫結到模型中的物件屬性,並指定發生更改時更新哪個屬性值。
類繫結
這種技術將 DOM 元素繫結到 AngularJS 類,並允許使用模型中的資料更新它們。
插值繫結
插值方法允許使用者將值附加到使用者介面元素。插值以單向過程繫結資料,因此資料僅以一種方式從元件流向 HTML 元素。
在 Angular 2+ 中使用一次性資料繫結的步驟
本節將向你展示如何在 Angular 2+ 中使用單向資料繫結。
-
建立一個元件。
-
建立服務。
-
將元件新增到模組中。
-
將服務新增到模組中。
-
將資料從服務繫結到元件。
-
從父元件觀察元件的變化。
示例(TypeScript):
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
demo = 'Write something here'
}
示例(HTML):
<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}
點選這裡檢視上述程式碼的演示。
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