綁定 HTML 屬性示範程式
有一 Component 內容如下
1 | ({ |
單向綁定:{{}}
- 在 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';
接著@NgModule
的imports
引入FormsModule
,就可以使用了!
1 | <input type="text" [(ngModel)]="name" /> |