模板語法入門

插值表達式

<div>Hello {{name}}</div>

等價于

<div [textContent]="interpolate(['Hello'], [name])"></div>

模板表達式

屬性綁定

輸入屬性的值為常量

<show-title title="Some Title"></show-title>

等價于

<show-title [title]="'Some Title'"></show-title>

輸入屬性的值為實例屬性

<show-title [title]="title"></show-title>

等價于

<show-title bind-title="title"></show-title>

事件綁定

<date-picker (dateChanged)="statement()"></date-picker>

等價于

<date-picker on-dateChanged="statement()"></date-picker>

模板引用變量

<video-player #player></video-player> 
<button (click)="player.pause()">Pause</button>

等價于

<video-player ref-player></video-player>

雙向綁定

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">

等價于

<input [(ngModel)]="todo.text"> 

* 與 <template>

*ngIf

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

最終轉換為

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

*ngFor

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" 
    [hero]="hero">
</hero-detail>

最終轉換為

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
  <hero-detail [hero]="hero"></hero-detail>
</template>