Angular_模板语法

版权声明：本文为Martin原创文章，未经Martin允许不得转载。 https://blog.csdn.net/qq_36279445/article/details/81383826

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