angular 默認數據改為單向綁定
數據綁定
- 插值表達式
<h1>{{title}}</h1>
- 使用方括號將HTML標簽的一個熟悉綁定到一個表達式
<img [src]='imgURL'>
- 使用小括號將組件的控制器的一個方法綁定為模板上的一個事件處理器
<button (click)='toTitle()'>商品詳情</button>
事件綁定
<button (click)='toTitle()'>商品詳情</button>
- () 代表這是一個事件
- 括號里面的是事件名稱
- '' 里面執行的表達式
- $event 瀏覽器事件對象
-
<button (click) = 'saved = true'>屬性賦值saved會被設置為true - HTML屬性是不變的，DOM屬性是可變的
DOM屬性綁定圖示
image.png
HTML屬性綁定(優先使用DOM綁定 )
- 基本的html屬性綁定
<td [attr.colspan='tableColspan']>tabe</td>
- css類綁定
- 替換綁定
<div class='aaa bbb' [class]='some'>data</div> // 注意這個class會完完全全替換掉這里面的class
- 根據后面的 值true就添加
// special 是樣式名稱 some是返回一個boolean
<div class='aaa bbb' [class.special]='some'>data</div>
- 控制多個clss
//后臺可以直接綁定一個對象
<div [ngClass]='{aaa:isAAA}'>data</div>
- 樣式綁定
// 帶單位 style.font-size.rem
<div [style.color]='{isColor ? 'red':'green'}'>data</div>
//后臺可以直接綁定一個對象
<div [ngStyle]='{'color':isColor ? 'red':'green'}'>data</div>
HTML屬性綁定圖示
image.png
雙向綁定
- 數據雙向綁定
// 只有ngModel綁定才是雙向綁定的
<input [(ngModel)] = 'name'>
<p>{{name}}</p>
