HTML 是 Angular 模板的語言。這一節學習如何經過數據綁定來動態設置 DOM(文檔對象模型)的值。html
綁定的類型能夠根據數據流的方向分紅三類: 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。express
數據方向 | 語法 | 綁定類型 |
---|---|---|
單向(從視圖到數據源) | {{ }}、 [target]="expression"、bind-target="expression" | 插值、(屬性、樣式、CSS類、Attribute) |
單向(從數據源到視圖) | (target)="statement"、on-target="statement" | 事件 |
雙向綁定 | [(target)]="expression"、bindon-target="expression" | 雙向 |
插播: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>
複製代碼
<button [attr.aria-label]="help">help</button>
複製代碼
<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">
複製代碼