## 原型 原型永远是我们在完成功能时需要首先考虑的。 ```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) | |