[從 0 開始的 Angular 生活]No.13 資料繫結的四種方法 - 內嵌繫結

發表於 | 更新於 | 分類於

前言

接著介紹 Angular 中是如何進行資料繫結的，以及 Angular 內共有幾種資料繫結的方式呢？

何謂資料繫結

在 Angular 內總共有四種資料繫結的方法，分別是

  • 內嵌繫結 ( interpolation )
    • {{property}}
  • 屬性繫結 ( Property Binding )
    • [property] = ‘statemant’
  • 事件繫結 ( Event Binding )
    • (event) = ‘someMethod($event)’
  • 雙向繫結 ( Two-way Binding )
    • [(ngModel)] = ‘property’

接下來我們將分成好幾篇逐步介紹這些繫結的方法。

內嵌繫結 ( interpolation )

之前把靜態網頁版型加到 Angular 專案內以 Component 方式管理後就沒有再動過了，這回我們從 app.component.ts 這裡開始。

app.component.ts 內容

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'firstAngular';
}

可以看到這個元件裡面除了一些必要的程式碼之外，沒有其他的東西了，相當的單純。而 class 裡面有一個 title 的屬性，這是一開始我們建立專案時 Angular CLI 自動幫我們添加的。

接著來到 app.component.html ，可將 <h1> 標籤處使用內嵌繫結 ( interpolation ) 的語法，替換成 class 內的 title 的屬性。

1
2
3
4
<div class="pull-left">
  <h1><a href="http://blog.miniasp.com/">{{title}}</a></h1>
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>

打開 Angular 開發伺服器，可以觀察到 <h1> 標籤內容的確是 title 的屬性值。

內嵌繫結是屬於單向的繫結，也就是說畫面上呈現的 title 資料，只會從 Component 內把值傳送給 template 顯示。

把內嵌繫結用於屬性上

內嵌繫結的語法除了放在標籤內，也可以使用在 HTML 標籤的屬性上。

舉個例子，我們在 app.component.ts 內的屬性上新增一個 link 屬性：

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'firstAngular';
  link = 'http://www.google.com';
}

接著回到 app.component.html 將某一段 a 標籤的 href 內容給替換掉：

1
2
3
4
<div class="pull-left">
  <h1><a href="{{link}}">{{title}}</a></h1>
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>

打開 Angular 開發伺服器，發現 a 標籤的 href 內容的確被替換了

小結

這個單元讓我感到相當熟悉尤其是 {{}} 符號， Vue 裡面也有類似的用法。所以這一部分學習起來特別容易理解。
0%