快速入門Angular(三):單向綁定、屬性綁定、雙向綁定

綁定 HTML 屬性示範程式

有一 Component 內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Component({
selector: 'home',
templateUrl: './home.component.html',
stylesUrl: ['./home.component.scss']
})
export class HomeComponent {
name: string = '我的名字'; //單向綁定、雙向綁定
title: string = '這是標題'; //屬性綁定
content: string = '<h3>帶HTML標籤的字串</h3>' //innerHTML
bool: boolean = false; //單向綁定的簡短表達式
}
onClick(value: string): void { //事件綁定
alert("Hello " + value);
}

單向綁定:{{}} - 在 html 畫面中顯示資料

若要將值直接顯示在 HTML 上,使用{{name}},就會將我的名字渲染上去
而`{{}}`裡面,也允許做一些簡單的運算,比如寫成 {{1+1}},則會計算出2
或寫簡單 if 判斷式{{bool ? 'true才會顯示': 'false才會顯示'}}
由於 bool 是false,此時會渲染出false才會顯示 這行文字

屬性綁定:[] - 綁定 HTML 原生元素裡

使用[]把 Component 裡的參數,綁定至 HTML 原生元素裡

1
<div [title]="title"></div>

就會將這是標題賦值過去

若是綁定參數中,帶有 HTML 標籤,直接使用{{content}}
會發現完全當成字串使用,若要使其渲染成 HTML,則寫成

1
<span [innterHTML]="content"></span>

事件綁定:() - 綁定 click…等 html 事件

當發生指定 event 時,可以指定 class 裡的 function
使用()來綁定,也可以傳值進 function

1
<button (click)="onClick('World')">Font color</button>

雙向綁定:[()] - 綁定 html 可互動的元素,如 input…

用於可以讓使用者互動的 HTML 元素,如<input><select><textarea>
讓使用者在 HTML 輸入的值可以跟 class 裡的參數即時互動
即當 value 在 class 中發生變化,HTML 就會跟著改變;在 HTML 中發生變化,class 中的內容也會跟著改變
使用[()]來綁定
由於雙向綁定是寫在FormsModule裡面
因此在主 Module 裡面:
import { FormsModule } from '@angular/forms';
接著@NgModuleimports引入FormsModule,就可以使用了!

1
<input type="text" [(ngModel)]="name" />