# 規劃路由 本節我們重新對路由進行規劃，將當前所開發的各個模塊向著生產環境再邁進一步。 ## 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) |