Angular學習(一):模板與數據綁定

HTML 是 Angular 模板的語言。這一節學習如何經過數據綁定來動態設置 DOM(文檔對象模型)的值。html

1、綁定語法

綁定的類型能夠根據數據流的方向分紅三類: 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。express

數據方向 語法 綁定類型
單向(從視圖到數據源) {{ }}、 [target]="expression"、bind-target="expression" 插值、(屬性、樣式、CSS類、Attribute)
單向(從數據源到視圖) (target)="statement"、on-target="statement" 事件
雙向綁定 [(target)]="expression"、bindon-target="expression" 雙向

2、綁定目標

插播:property屬性值能夠是各類類型的,attribute屬性值只可以是字符串。app

綁定類型 目標
屬性 元素的 property、組件的 property、指令的 property
Attribute(極少數狀況下) attribute(例外狀況)
CSS 類 class property
樣式 style property
事件 元素的事件、組件的事件、指令的事件
雙向 事件與 property
一、屬性綁定示例

當要渲染的數據類型是字符串時,沒有技術上的理由證實哪一種形式更好。 但數據類型不是字符串時,就必須使用屬性綁定了。學習

元素:<img [src]="heroImageUrl">
組件(父子組件之間通信):<app-hero-detail [hero]="currentHero"></app-hero-detail>
指令:<div [ngClass]="{'special': isSpecial}"></div>
複製代碼
二、Attribute綁定示例
<button [attr.aria-label]="help">help</button>
複製代碼
三、CSS 類綁定示例
<div [class.special]="isSpecial">Special</div>
複製代碼
四、樣式綁定示例
<button [style.color]="isSpecial ? 'red' : 'green'">
複製代碼
五、事件綁定示例
元素:<button (click)="onSave()">Save</button>
組件(父子組件之間通信):<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
指令:<div (myClick)="clicked=$event" clickable>click me</div>
複製代碼
六、雙向綁定
<input [(ngModel)]="name">
複製代碼
相關文章
相關標籤/搜索