## 原型 原型永遠是我們在完成功能時需要首先考慮的。 ```html +++ b/first-app/src/app/app.component.html @@ -1,4 +1,5 @@ <router-outlet></router-outlet> +<a>新增</a> <table class="table table-striped"> <thead> <tr class="table-primary"> @@ -17,7 +18,7 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td (click)="onDelete(teacher.id)">刪除</td> + <td (click)="onDelete(teacher.id)">刪除 編輯</td> </tr> </tbody> </table> ``` 這里的**編輯**會引發一個問題：當點擊編輯時，實際上觸發了`onDelete`方法。若要解決這個問題，則需要單獨為**刪除**、**編輯**定義自己的元素: ```html +++ b/first-app/src/app/app.component.html @@ -18,7 +18,7 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td (click)="onDelete(teacher.id)">刪除 編輯</td> + <td><span (click)="onDelete(teacher.id)">刪除</span> <a>編輯</a></td> </tr> </tbody> </table> ``` 如上分別為**刪除**引入了元素`span`，為**編輯**引入了元素`a`。 ## RouterLink 在Angular中可以使用`RouterLink`指令來完成路由的跳轉，比如當前需要實現點擊新增按扭時將瀏覽器`url`定義到`/add`: ```html +++ b/first-app/src/app/app.component.html @@ -1,5 +1,5 @@ <router-outlet></router-outlet> -<a>新增</a> +<a routerLink="add">新增</a> <table class="table table-striped"> <thead> <tr class="table-primary"> ``` 我們使用`ng s`啟動項目并進行測試：  ??  接下來為編輯添加`RouterLink` ```html +++ b/first-app/src/app/app.component.html @@ -18,7 +18,7 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td><span (click)="onDelete(teacher.id)">刪除</span> <a>編輯</a></td> + <td><span (click)="onDelete(teacher.id)">刪除</span> <a [routerLink]="'edit/' + teacher.id">編輯</a></td> </tr> </tbody> </table> ``` 在此使用了插值`{{teacher.id}}`將教師的id添加到`a`標簽的`routerLink`中，此時將我們點擊張三、李四對應的`編輯`時，將對應跳轉到http://localhost:4200/edit/1、http://localhost:4200/edit/2 地址，該地址對應了編輯組件所有的路由。  ??  OK，請自行的充分測試一下吧。 ## 事件與屬性 在代碼`<td><span (click)="onDelete(teacher.id)">刪除</span> <a routerLink="edit/{{teacher.id}}">編輯</a></td>`中我們使用了兩次`teacher.id`。前面的直接使用了`teacher.id`而后面的卻使用了插值的方法。 那么，什么時候直接使用，什么時候又要使用插值的方式呢？ 在模塊中引用變量大概事如下三種模式： 1. `(xxx)="yyy()"`：`(click)="onDelete()"`為方法觸發，表達元素被點擊時，對應調用C層的`onDelete`方法。`onDelete`為C層的方法的調用，傳入變量時需要的標準的TypeScript語法：`onDelete(teacher.id)`。 2. `xxx="yyy"`：`routerLink="edit"`為標準的html語法，`routerLink`此時為`a`的屬性，作用屬性的`routerLink`后面根的類型是標準的html代碼，而預在html代碼中插入C層的屬性值，則需要使用插值`{{}}`，所以有：`routerLink="edit/{{teacher.id}}"` 3. `[xxxx]="yyy"：`除了可以使用`routerLink`設置`a`標簽的屬性外，還可以使用`[routerLink]="'edit'"`來設置。此時位于`[]`中的`routerLink`理解為**變量名**，而`"值"`則是為**變量**賦值。所以`[routerLink]="'edit'"`等價于TypeScript中的`routerLink = 'edit'`，此時若要在edit后拼接教師id，則需要對應`routerLink = 'edit/' + teacher.id`，最終反應到模塊文件中，需要用`[]`包裹左側的**變量名**，用`""`包裹右側的值：`[routerLink] = "'edit/' + teacher.id"` 我們把上述第1點的形式稱為**事件**，把第2，3種形式稱為**屬性**。 ## BUG 通過測試我們發現兩個BUG。 1. 在新增教師時，點擊保存后新數據并未實時的顯示在教師列表中。  2. 在編輯用戶張三時，點擊李四對應的`編輯`，當前編輯頁面仍然編輯是李四的。  第1個BUG我們已經掌握了解決方法，請參考教程自行解決；第2個BUG待我們后期對`觀察者模式`有更深入的了解后自行解決。 | 名稱 | 地址 | 備注 | | -------------- | ------------------------------------------------------------ | ---- | | RouterLink | [https://angular.cn/api/router/RouterLink#relative-link-paths](https://angular.cn/api/router/RouterLink#relative-link-paths) | | | 屬性綁定與插件 | [https://angular.cn/guide/property-binding#property-binding-and-interpolation](https://angular.cn/guide/property-binding#property-binding-and-interpolation) | | | 事件綁定 | [https://angular.cn/guide/event-binding](https://angular.cn/guide/event-binding) | | | 本章源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.6.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.6.1.zip) | |