插值表达式
<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>