1. 模板语法
1. 属性绑定 []
<input [value]="firstName">
// 把value 属性绑定到表达式firstName
<div [attr.role]="myAriaRole">
// 把属性(Attribute)role 绑定到表达式myAriaRole 的结果
2. 插值绑定
<div title="hello {{ponyName}}"
> 把一个属性绑定到插值字符串(如"Hello Seabiscuit")。这种写法等价于<div [title]="'Hello ' + ponyName">
<p>Hello {{ponyName}}
</p> 把文本内容绑定到插值字符串(如"Hello Seabiscuit")。
3. 双向绑定[( )]
<my-cmp [(title)]="name">
//
设置双向绑定。等价于<my-cmp [title]="name" (titleChange)="name=$event">。
4. 事件绑定
<button (click)= "readRainbow($event)">
// 当这个按钮元素上的click事件触发时,调用方法readRainbow,并把这个时间对象作为参数传进去
5. 元素转内嵌模板*myUnless="myExpression"
这个 * 符号会把当前元素转换成一个内嵌的模板。它等价于: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
<p *myUnless="myExpression">...</p>
6. 管道 |
// 使用名叫myCardNumberFormatter的管道对表达式cardNumber的当前值进行转换。
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>
7. option? 可选
//安全导航操作符(?)表示employer字段是可选的,如果它是 undefined ,那么表达式其余的部分就会被忽略,并返回 undefined。
<p>Employer: {{employer?.companyName}}</p>
8. 局部 变量 #varName
//创建一个局部变量movieplayer,支持在当前模板的数据绑定和事件绑定表达式中访问video元素的实例。
<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video>
9. svg
//模板中的 SVG 片段需要给它的根元素加上svg:前缀,以便把 SVG 元素和 HTML 元素区分开
<svg:rect x="0" y="0" width="100" height="100"/>
// 以<svg>作为根元素时会自动识别为 SVG 元素,不需要前缀。
<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg>
2. 内置指令
以下1- 5 导入
1. *ngIf
<section *ngIf="showSection">
// 根据showSection表达式的结果,移除或重新创建 DOM 树的一部分。
2. *ngFor
<li *ngFor="let item of list">
//把 li 元素及其内容变成一个模板,并使用这个模板为列表list中的每一个条目item实例化一个视图view。
3. [ngSwitch]
// 根据conditionExpression的当前值选择一个嵌入式模板,并据此决定是否替换掉这个 div 的内容。
<div [ngSwitch]="conditonExpression">
<ng-template [ngSwitchCase]="case1Exp1">line 1</ng-template>
<ng-template ngSwitchCase="case2Exp2">line 2</ng-template>
<ng-template ngSwitchDefault>line 3 </ng-template>
</div>
4. [ngClass]
// 根据 map 中的 value 是否为真,来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 {class-name: true/false} 的 map。
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
5. [ngStyle]
// 允许你使用 CSS 为 HTML 元素指定样式。你可以像第一个例子那样直接使用 CSS,也可以调用组件中的方法。
<div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()">
6. [ngModel]
<input [(ngModel)]="userName">
// 为表单控件提供双向数据绑定、解析和验证功能。
网友评论