模板语法

 

​​<input [value]="firstName">​​

把​​value​​​属性绑定到表达式​​firstName​​

​​<div [attr.role]="myAriaRole">​​

把属性（Attribute）​​role​​​绑定到表达式​​myAriaRole​​的结果。

​​<div [class.extra-sparkle]="isDelightful">​​

根据​​isDelightful​​​表达式的结果是否为真，决定 CSS 类​​extra-sparkle​​是否出现在当前元素上。

​​<div [style.width.px]="mySize">​​

把 CSS 样式属性​​width​​​的 px（像素）值绑定到表达式​​mySize​​的结果。单位是可选的。

​​<button (click)="readRainbow($event)">​​

当这个按钮元素（及其子元素）上的 click 事件触发时，调用方法​​readRainbow​​，并把这个事件对象作为参数传进去。

​​<div title="Hello {{ponyName}}">​​

把一个属性绑定到插值字符串（如"Hello Seabiscuit"）。这种写法等价于​​<div [title]="'Hello ' + ponyName">​​

​​<p>Hello {{ponyName}}</p>​​

把文本内容绑定到插值字符串（如"Hello Seabiscuit"）

​​<my-cmp [(title)]="name">​​

设置双向绑定。等价于​​<my-cmp [title]="name" (titleChange)="name=$event">​​。

​​<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video>​​

创建一个局部变量​​movieplayer​​​，支持在当前模板的数据绑定和事件绑定表达式中访问​​video​​元素的实例。

​​<p *myUnless="myExpression">...</p>​​

这个 ​​*​​​ 符号会把当前元素转换成一个内嵌的模板。它等价于： ​​<ng-template [myUnless]="myExpression"><p>...</p></ng-template>​​

​​<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>​​

使用名叫​​myCardNumberFormatter​​​的管道对表达式​​cardNumber​​的当前值进行变幻

​​<p>Employer: {{employer?.companyName}}</p>​​

安全导航操作符（​​?​​​）表示​​employer​​​字段是可选的，如果它是 ​​undefined​​​ ，那么表达式其余的部分就会被忽略，并返回 ​​undefined​​。

​​<svg:rect x="0" y="0" width="100" height="100"/>​​

模板中的 SVG 片段需要给它的根元素加上​​svg:​​前缀，以便把 SVG 元素和 HTML 元素区分开。

​​<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg>​​