在前面的开发中我们在V层中接触到了如下几种绑定方法： ``` <form (ngSubmit)="onSubmit()"> ① [formControl]="name" ② [formGroup]="formGroup" ② <a [routerLink]="['./edit', teacher.id]">编辑</a>② [(ngModel)]="username" ①② <a routerLink="teacher">教师管理</a> ③ formControlName="name" ③ <td>{{klass.name}}</td> ④ ``` 抽象其共性，我们将其分别五类： * ① (x)="xxx()" * ② [x]="xxx" * ① + ② [(x)]="xxx" * ③ x=xxx * ④ {{x}} 下面我们对上述五类使用的方法进行总结 ## (x)="xxx()" 使用`(x)`来表示：`x`是宿主元素的一个事件(动作）。比如`<form (ngSubmit)`表示：宿主form表单的提交事件。当宿主表单有提交事件时发生时，将执行`(ngSubmit)`对应的方法。所以该项的值应该是C层中绑定给V层(public类型)进而在V层中可以调用的一个方法。比如：`<form (ngSubmit)="onSubmit()"> `中的`onSubmit()`对应C层中的`public onSubmit()`方法。 ## [x]="xxx" 使用`[x]`来对宿主元素赋值，该值的来源的V层中绑定的`变量`。比如`<input [formControl]="name"`表示将V层中的`变量`（该`变量`可能是由C层绑定给V层的，也可能是V层自己定义的）`name`通过`formControl`指令来将值绑定给宿主元素`input`。 ## [(x)] `[(x)]` 在形式上就等于 `(x)` + `[x]`，其在功能上也是如此，它相当于上述两种使用方法的叠加。所以：`<input [(ngModel)]="name"` 即表示宿主input的ngModel事件将触发`name()`方法，又表示宿主input通过ngModel指令绑定了`name`的值。 > `[(x)]`的出现笔者认为更多的是照顾原有angularjs的开发者，在实际的项目中我们不推荐这样使用。至于angular是如何做到的我们不做讨论。 ## x=xxx `x=xxx`与`[x]="xxx"`实现的功能是一致的。它们之间的区别是：`<a routerLink="teacher"`表示routerLink指令直接接收了一个字符串`"teacher"`；而 `<a [routerLink]="teacher"`则表示routerLink指令接收了一个V层中的`teacher变量`中的值，如果此时`teacher变量`中的值为`"abc"`，则相当于：`<a routerLink="abc"`。 所以以下代码是等价的： ``` <a routerLink="teacher">教师管理</a> ``` 等价于： C ``` a = 'teacher'; ``` V ``` <a [routerLink]="a">教师管理</a> ``` 除此以外，我们还可以在`[x]`的赋值过程中，直接实例化对象，比如： `<a [routerLink]="['./edit', teacher.id]">编辑</a>`，表示routeLink指令接收了一个`[]`数组对象。 ## {{x}} 该用法最为简单，表示在V层中直接输出V层中`x`的值。 # 总结 | | 操作对象 | 输入\输出 | | --- | --- | --- | | `(x)` | 方法名 | 输出 | | `[x]` | 变量名 | 输入 | | `[(x)]` | 变量名 | 输出+输出 | | `x` | 字符串 | 输入 | | `{{x}}` | 变量 | 输出 |