Angular 2+ 中的一次性資料繫結

1. 元件到檢視
2. 在 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}}

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