模板语法入门

插值表达式

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

等价于

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

模板表达式

属性绑定

输入属性的值为常量

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

等价于

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

输入属性的值为实例属性

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

等价于

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

事件绑定

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

等价于

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

模板引用变量

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

等价于

<video-player ref-player=""/>

双向绑定

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

等价于

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

* 与 <template>

*ngIf

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

最终转换为

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"/>
</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"/>
</template>