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

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 元件到檢視
  2. 在 Angular 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}}

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

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 Data Binding