Angular 4 模板语法

模板语法

插值表达式

<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>