iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Modern Web

從零開始的Angular前端開發系列 第 7

# DAY 7 Binding (一)

我們現在知道如何用 component 來顯示頁面,要組成 component,需要的是 tshtml ,由 ts 負責程式邏輯, html 負責顯示畫面。我們來看看這兩個檔案,是如何傳遞資料以及溝通的吧。

今天我們介紹兩種 binding 的方式。

Interpolation

首先是最基本的 Interpolation ,我們先前在app.component.html看過的:

{{ ... }}
// app.component.html
Welcome to {{ title }}!
// app.component.ts
export class AppComponent {
  title = 'Sponge-Website';
}

很單純的就是將 .ts 內的變數丟到 html 。Interpolation是屬於單向的資料流,只能從 .ts 端送資料給 html
那我們還可以這麼做:

// app.component.html
<a href="{{ url }}">Link</a> 
// app.component.ts
export class AppComponent {
  title = 'Sponge-Website';
  url = 'http://www.google.com';
}

那麼這個URL就能被動態指定。
Angular 會對 {{...}} 裡的內容先做求值,再轉換成字串,我們可以在裡面放入運算式:

// app.component.html
<p>3! = {{ 1 * 2 * 3 }}</p>

執行結果:

{{...}}中也可以放入 function ,我們在 .ts 定義一個 function 叫factorial(),且加入一個member variable 叫factorialNumber

// app.component.html
<p>{{factorialNumber + '!'}} = {{ factorial() }}</p>
// app.component.ts
export class AppComponent {

 factorialNumber = 5;
 factorial() {
    let result = 1;
    for (let i = 1; i < this.factorialNumber + 1; i++) {
      result *= i;
    }
    return result;
  }
  
}

執行結果:

這邊的 factorial() 函式,表示求一個數字的階乘,從 1 一直乘到 factorialNumber 指定的 5 , this.factorialNumberthis 表示這個變數是屬於自己本身這個class,這邊是屬於物件的觀念。

如果我在 {{...}} 中放一些奇怪的東西呢:

// app.component.html
<p>getNumber: {{ getNumber()  + 1 + A }} </p>
// app.component.ts
export class AppComponent {
  number = 5;
  getNumber() {
    return this.number;
  }
  
}

Angular 求值時就會顯示 Not A Number:

乖乖加上引號, Angular 就會很好心幫我們將字串做連接:

// app.component.html
<p>getNumber: {{ getNumber()  + 1 + 'A' + "BC" }} </p>

Property binding

當我們在 html 元素中,要動態指定屬性的值時,會選擇使用 Property binding ,語法:

[property]="value"

要記得的是,使用Property binding 時,要將html元素中的屬性,用中括號 [] 括起來。

我們前面在 app.component.ts 中定義了 url ,我們再次使用他:

<a href="http://www.google.com"> Normal Link</a><br>
<a [href]="url"> Property binding Link</a>
export class AppComponent {
  url = 'http://www.google.com';
}

Normal Link 和 Property binding Link 這兩個連結,效果一樣,但使用 Property binding ,可以動態決定 url ,實作彈性較大。

你還可以用這種方式實現 Property binding:

<a bind-href="url"> Property binding Link</a>

在屬性前面加上 bind-,而不使用[],效果一樣。


上一篇
# DAY 6 HTML(二)
下一篇
# DAY 8 Binding (二)
系列文
從零開始的Angular前端開發30

尚未有邦友留言

立即登入留言