# 规划路由 本节我们重新对路由进行规划，将当前所开发的各个模块向着生产环境再迈进一步。 ## Welcome 系统登录后，我们先显示一个welcome组件，则应该将Welcome组件加入到路由中。为此，我们先删除原来不合理的路由信息: ```typescript +++ b/first-app/src/app/app-routing.module.ts @@ -5,18 +5,7 @@ import {EditComponent} from './edit/edit.component'; import {PersonalCenterComponent} from './personal-center/personal-center.component'; const routes: Routes = [ - { - path: 'add', - component: AddComponent - }, - { - path: 'edit/:id', - component: EditComponent - }, - { - path: 'personal-center',# - component: PersonalCenterComponent - } + ]; @NgModule({ ``` 然后在首页上加入Welcome组件: ```typescript +++ b/first-app/src/app/app-routing.module.ts @@ -3,9 +3,13 @@ import {Routes, RouterModule} from '@angular/router'; import {AddComponent} from './add/add.component'; import {EditComponent} from './edit/edit.component'; import {PersonalCenterComponent} from './personal-center/personal-center.component'; +import {WelcomeComponent} from './welcome.component'; const routes: Routes = [ - + { + path: '', + component: WelcomeComponent + } ]; @NgModule({ ``` 使用`ng s`启动项目，输入正确的用户密码后跳转到首页：  ## <router-outlet> 前面我们说`<router-outlet></router-outlet>`是个路由出口，所有并声明在路由的组件最终将显示在这里，而当前的组件嵌套结构如下：  那么Welcome组件当然要显示在app教师列表组件中了，我们可以改变`<router-outlet>`的位置来达到仅显示Welcome组件的目的： ```html +++ b/first-app/src/app/app.component.html @@ -1,4 +1,3 @@ -<router-outlet></router-outlet> <div class="row"> <div class="col-12 text-right"> <a class="btn btn-primary mr-2" routerLink="add"><i class="fas fa-plus"></i>新增</a> ``` ```html +++ b/first-app/src/app/index/index.component.html @@ -1,2 +1,2 @@ -<app-root *ngIf="login"></app-root> +<router-outlet *ngIf="login"></router-outlet> <app-login *ngIf="!login" (beLogin)="onLogin($event)" ></app-login> ```  ## 定义其它路由 接下来按照该思路，我们定义教师列表、新增、编辑组件、个人中心对应的路由。 ```typescript +++ b/first-app/src/app/app-routing.module.ts @@ -4,11 +4,28 @@ import {AddComponent} from './add/add.component'; import {EditComponent} from './edit/edit.component'; import {PersonalCenterComponent} from './personal-center/personal-center.component'; import {WelcomeComponent} from './welcome.component'; +import {AppComponent} from './app.component'; const routes: Routes = [ { path: '', component: WelcomeComponent + }, + { + path: 'teacher', + component: AppComponent + }, + { + path: 'teacher/add', + component: AddComponent + }, + { + path: 'teacher/edit/:id', + component: EditComponent + }, + { + path: 'personal-center', + component: PersonalCenterComponent } ]; ``` 通过url访问http://localhost:4200，http://localhost:4200/teacher，http://localhost:4200/teacher/add，http://localhost:4200/personal-center均成功了，但唯独http://localhost:4200/teacher/edit/1不行。控制台显示错误如下：  ## 坑队友 这便是前面在写编辑组件时与APP耦合在一起的坑。 有人说我们在开发教师编辑组件时并不能够预测到将来系统还有修改路由的需求，修改路由的需求导致了原来可以获取到的App组件依赖不在了。所以这并不能说自己在坑队友。但是我想说，我们在开发教师编辑组件时虽然预计不到将来的路由的变更情况，但我们却违背了**不能在一个组件注入另一个组件**的原则，违背了**高内聚、低耦合**的原则。 上述问题的出现，并不在于我们考虑的多与少，而在于在我们实践还不够丰富的情况下，盲目自信地将**原则、规范**抛在了一边。最佳实践往往是一些比我们更牛、比我们阅历更深的前辈们总结的防坑宝典，所以如果你所在的团队有**规范**，有**原则**，那么请愉快的遵守吧，因为这意味着你所处的环境中，被坑的概率并不高。 ## 本节作业 请结果搜索引擎，在教师编辑组件中删除对App组件的应用，并在编辑成功后跳回教师列表页面。同时，修改教师列表组件的路由错误。 | 名称 | 链接 | | ------------------ | ------------------------------------------------------------ | | 访问查询参数和片段 | [https://angular.cn/guide/router#accessing-query-parameters-and-fragments](https://angular.cn/guide/router#accessing-query-parameters-and-fragments) | | 路由出口 | [https://angular.cn/guide/router#router-outlet](https://angular.cn/guide/router#router-outlet) | | 路由链接 | [https://angular.cn/guide/router#router-links](https://angular.cn/guide/router#router-links) | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step5.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step5.4.zip) |