模板语法
|
|
<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> | |