在前面的開發中我們在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}}` | 變量 | 輸出 |