3. Angular 语法

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"> // 为表单控件提供双向数据绑定、解析和验证功能。