久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

## 原型 原型永遠(yuǎn)是我們在完成功能時(shí)需要首先考慮的。 ```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> ``` 這里的**編輯**會引發(fā)一個(gè)問題：當(dāng)點(diǎn)擊編輯時(shí)，實(shí)際上觸發(fā)了`onDelete`方法。若要解決這個(gè)問題，則需要單獨(dú)為**刪除**、**編輯**定義自己的元素: ```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`指令來完成路由的跳轉(zhuǎn)，比如當(dāng)前需要實(shí)現(xiàn)點(diǎn)擊新增按扭時(shí)將瀏覽器`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`啟動項(xiàng)目并進(jìn)行測試：  ??  接下來為編輯添加`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`標(biāo)簽的`routerLink`中，此時(shí)將我們點(diǎn)擊張三、李四對應(yīng)的`編輯`時(shí)，將對應(yīng)跳轉(zhuǎn)到http://localhost:4200/edit/1、http://localhost:4200/edit/2 地址，該地址對應(yīng)了編輯組件所有的路由。  ??  OK，請自行的充分測試一下吧。 ## 事件與屬性 在代碼`<td><span (click)="onDelete(teacher.id)">刪除</span> <a routerLink="edit/{{teacher.id}}">編輯</a></td>`中我們使用了兩次`teacher.id`。前面的直接使用了`teacher.id`而后面的卻使用了插值的方法。 那么，什么時(shí)候直接使用，什么時(shí)候又要使用插值的方式呢？ 在模塊中引用變量大概事如下三種模式： 1. `(xxx)="yyy()"`：`(click)="onDelete()"`為方法觸發(fā)，表達(dá)元素被點(diǎn)擊時(shí)，對應(yīng)調(diào)用C層的`onDelete`方法。`onDelete`為C層的方法的調(diào)用，傳入變量時(shí)需要的標(biāo)準(zhǔn)的TypeScript語法：`onDelete(teacher.id)`。 2. `xxx="yyy"`：`routerLink="edit"`為標(biāo)準(zhǔn)的html語法，`routerLink`此時(shí)為`a`的屬性，作用屬性的`routerLink`后面根的類型是標(biāo)準(zhǔn)的html代碼，而預(yù)在html代碼中插入C層的屬性值，則需要使用插值`{{}}`，所以有：`routerLink="edit/{{teacher.id}}"` 3. `[xxxx]="yyy"：`除了可以使用`routerLink`設(shè)置`a`標(biāo)簽的屬性外，還可以使用`[routerLink]="'edit'"`來設(shè)置。此時(shí)位于`[]`中的`routerLink`理解為**變量名**，而`"值"`則是為**變量**賦值。所以`[routerLink]="'edit'"`等價(jià)于TypeScript中的`routerLink = 'edit'`，此時(shí)若要在edit后拼接教師id，則需要對應(yīng)`routerLink = 'edit/' + teacher.id`，最終反應(yīng)到模塊文件中，需要用`[]`包裹左側(cè)的**變量名**，用`""`包裹右側(cè)的值：`[routerLink] = "'edit/' + teacher.id"` 我們把上述第1點(diǎn)的形式稱為**事件**，把第2，3種形式稱為**屬性**。 ## BUG 通過測試我們發(fā)現(xiàn)兩個(gè)BUG。 1. 在新增教師時(shí)，點(diǎn)擊保存后新數(shù)據(jù)并未實(shí)時(shí)的顯示在教師列表中。  2. 在編輯用戶張三時(shí)，點(diǎn)擊李四對應(yīng)的`編輯`，當(dāng)前編輯頁面仍然編輯是李四的。  第1個(gè)BUG我們已經(jīng)掌握了解決方法，請參考教程自行解決；第2個(gè)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) | |