Angular中的数据绑定

(1)HTML绑定：{{}}

(2)属性绑定:[]

注意:属性绑定通常赋值为变量，如果赋值为常量(如字符串常量)

必须用引号括起来，如<img [src]="'../../assets/'+imgUrl">

(3)事件绑定：()

(click)="add()"

注意：事件名用()括起来，处理函数后必须有()

(4)指令绑定

(5)双向数据绑定

Vue.js中的常用命令：v-on、v-bind、v-for、v-if、v-show、v-hide、v-else、v-text/html、v-clock

2.Angular中的指令系统

(1)循环绑定 *ngFor

<ANY *ngFor="let 临时变量 of 数据">

<ANY *ngFor="let 临时变量 of 数据; let i=index;">

<ANY *ngFor="let 临时变量 of 数据; index as i ">

(4)样式绑定：[ngClass]

<ANY [ngClass="obj"]>

说明：ngClass绑定的值必须是一个对象！对象的属性就是CSS class名，

属性值为true/false,true的话该class就出现，否则该class不出现。

(5)了解：特殊的选择绑定：

<ANY [ngSwitch]="表达式">

<ANY *ngSwitchCase="值1"></ANY>

<ANY *ngSwitchCase="值2"></ANY>

...

<ANY *ngSwitchDefault></ANY>

</ANY>

(6)双向数据绑定指令:[(ngModel)]-----重点

方向 1：Model => View,模型变则视图变，用[ ]绑定

方向 2：View => Model,视图(表单元素)模型变，用()绑定

<input/select/textarea [(ngModel)]="uname">

注意：1.如果想直接监视模型数据的改变，可以绑定ngModelChange事件

2.ngModel指令不在commonModule模块中，而在FormsModule中，使用之前必须在

主模块中导入该模块：

//app.module.ts

@NgModule({

imports:[BrowserModule,FormsModule]

})

Angular中的指令分为三类：

(1)组件指令：NG中Component继承自Directive

(2)结构性指令：会影响DOM树结构，必须使用 * 开头，如*ngFor、*ngIf

(3)属性型指令：不会影响DOM树结构，只是影响元素外观或行为，必须用[ ]括起来，

如[ngClass],[ngStyle]

3.扩展小知识：如何自定义指令

提示：创建指令的简单工具：ng g directive 指令名

自定义指令都是作为元素属性来使用的，selector应该是:[指令名]

<ANY xuYaoQiangDiao>...</ANY>