iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

Angular 8 從推坑到放棄系列 第 7

[Day 06 ]Angular 資料繫結

Angular 透過 Data Binding 讓 TypeScript(Component) 及 HTML(Template) 兩邊互相傳遞資料,Data Binding 的方式有四種。
將介紹 Angular 8 (Angular 2) 的四種 Data Binding 互動。

字串插值(String Imterpolation)

字串插值(String Imterpolation) 是直接在 Template 中插入 {{value}},執行期間 value 的變化,都會連動更新到 Template 畫面上

透過 一般 value綁定
<p>{{'Server'}} with Id {{serverId}} is {{serverStatus}}</p>
透過 函式 回傳的 value 綁定
<p>{{'Server'}} with Id {{serverId}} is {{getServerStatus()}}</p>
export class ServerComponent implements OnInit {
  serverId:number =10;
  serverStatus:string = 'offline';
  constructor() { }

  ngOnInit() {
  }
  getServerStatus(){
    return this.serverStatus;
  }
}

當 TypeScript 中的 serverId 產生任何變化,Template 的內容都會隨之變動,而 getServerStatus 則是回持續呼叫該 Fucntion

屬性綁定(Property Binding)

屬性綁定(Property Binding)是在 HTML 中的屬性加入 [property]="value",執行期間 value 的變化,會值接影響 property。

<button [disabled]="!allowNewServer">Add Server</button>

export class ServerComponent implements OnInit {
  allowNewServer = false;
  constructor() { 
    setTimeout(()=>{
      this.allowNewServer = true;
    },2000);
  }

  ngOnInit() {
  
}

結果如下

當 TypeScript 中的 allowNewServer 過兩秒後被改為 true,Template 的 Button 從 Disabled 變為 Abled

事件綁定(Event Binding)

事件綁定(Event Binding)用法是在 HTML 中的加入 (event)="functionName()",當發生指定 event 時,就會呼叫 TypeScript 中的 functionName 方法。

雙向資料繫結(Two-Way-Binding)

Angular 的雙向資料繫結 與 AngularJS 的 雙向資料繫結 運作原理是完全不同的,目前看起來是沒有 AngularJS 會遇到效能問題。

雙向資料繫結 (Two-way Data Binding)用法是在 HTML 中的加入 [(ngModel)]="value"。
雙向綁定用於可以讓使用者互動的 HTML 元素,如:、、…等。

雙向綁定是屬性綁定加上事件綁定的組合,所以當 value 在 TypeScript 發生變化,HTML 就會跟著改變。
在 HTML 中發生變化,TypeScript 中的內容也會跟著改變。

在使用 [(ngModel)] 前,需要先在 AppModule 引用 FormsModule

import { FormsModule } from '@angular/forms'; 
imports:[ BrowserModule, FormsModule ],

參考

  1. Angular 4 教學 - Data Binding

  2. Angular 8 Data Binding

  3. Angular Two-Way Data Binding


上一篇
[Day 05] Angular 是如何運作的
下一篇
[Day 07] 基礎 Typescript
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言