# 路由 我們已經共同完成了教師列表組件、新建教師組件。本節我們使用`路由`將這兩個組件結合起來。 ## 什么是路由 在生活中我們接觸`路由`這個詞匯更多來源于`路由器`。生活中的路由器主要提供的供手機、電腦等網絡設置上網，好像`路由`就等于`怎么上網`一樣。 但實際上并不如此，一個看似不大的家庭路由器已經發展為集成撥號、路由、交換、無線發射等眾多功能綜合網絡設備。而`路由`僅僅是這個設備一個核心功能而已。 路由一詞來自于`router`，而`router`譯為：擁有選擇路線功能的能動體。比如生活中的快遞小哥，就是個典型的`router`。他可以按照我們快照上的地址，選擇合適的路線，將快遞（數據）轉發到我們（終端）手中。 綜上所述，`router`的作用可以理解為**具有數據轉發功能的X**。所以日后每當我們聽到路由一詞時，應該想到的都應該是**數據轉發**。 在Angular中也同樣如此，Angular中的路由同樣起的是數據轉發的作用。其具體的功能可以描述為：將瀏覽器地址欄中的數據轉發到某個組件上。 ## 默認路由 Angular提供了一條默認入口路由，該路由使得我們在訪問[http://localhost:4200](http://localhost:4200)時，能夠被App組件處理，該路由被定義在了`src/app/app.module.ts`中： ```typescript @NgModule({ declarations: [ AppComponent, AddComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule ], providers: [], ?? bootstrap: [AppComponent] }) export class AppModule { } ``` - bootstrap譯為**啟動**，當訪問http://localhost:4200時實際上我們查看到的是AppComponent便是此處的代碼生效。 ## 路由設置 除了入口路由外，當前其它的路由在`src/app/app-routing.module.ts`中設置： ```typescript import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; ??const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` - 在此routers數組中定義路由 比如我們當前希望用戶訪問 http://localhost:4200/add時觸發Add組件，則可以如下設置： ```typescript +import {AddComponent} from './add/add.component'; -const routes: Routes = []; +const routes: Routes = [ + { + path: 'add', + component: AddComponent + } +]; ``` 如引，我們便設置了訪問路徑`path`以`AddComponent`的關聯信息。 ## 路由出口 此時我們使用`ng s`啟動項目并在瀏覽器中輸入http://localhost:4200/add查看效果。  ?? 為什么會是這樣呢？此時我們打開控制臺，并沒有發現任何報錯信息，那么說好的Add組件呢？ 這是由于在Angular中設置完路由后，需要為此路由指定一個出口。即在哪個位置上顯示上當前路由對應的組件。當前訪問的地址為：`http://localhost:4200/add`，Angular可以成功的獲取到`/add`信息，并將其分解為父路徑`/` ? 子路徑 `add`，其中父路徑`/`對應啟動組件 -- App組件，而子路徑`add`則對應Add組件。 所以若想顯示子路徑對應的Add組件，則應該在其父路徑對應的（父）組件上定義一個路由出口，即：在父組件的哪個位置上顯示該Add子組件，假設我們想把子Add組件顯示在表格上方： ```html --- a/first-app/src/app/app.component.html +++ b/first-app/src/app/app.component.html @@ -1,3 +1,4 @@ + ?? <router-outlet></router-outlet> <table class="table table-striped"> <thead> <tr class="table-primary"> ``` - 使用`<router-outlet></router-outlet>`來表示使用路由設置的子組件的位置。  ## 生產環境 為了更好的查看到一些效果，我們接下來將父App組件中獲取教師列表的功能，由測試開發環境變更為生產環境。 當前我們準備了如下API來獲取后臺系統中的所有教師數據。 ```bash GET /teacher ``` | **類型Type** | **名稱Name** | **描述Description** | **類型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Response | | | `[{id: number, username: string, name: string, email: string, sex: boolean}, {...}]` | 由以下接口信息，我們獲取到：請求后臺全部教師的地址、請求成功后將返回的數據格式為**教師數組**。則按該接口更新代碼如下： ```typescript --- a/first-app/src/app/app.component.ts +++ b/first-app/src/app/app.component.ts @@ -18,7 +18,7 @@ export class AppComponent implements OnInit { * 組件初始化完成后將被自動執行一次 */ ngOnInit(): void { - this.httpClient.get<[]>('assets/teacher-all.json') + this.httpClient.get<[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } } ``` 此時，添加新教師后再次刷新頁面，可以查看到成功的添加了一位新教師：  > 你或許能夠請求到更多的用戶，這些用戶可能是系統內置或是由其它的學生添加的。 ## 驗證 此時我們輸入http://localhost:4200時，將顯示教師列表；輸入http://localhost:4200/add時，將顯示新增教師及教師列表。 好了，就到這里。 ## 本節作業 1. 請嘗試將添加教師Add組件移動到其父組件的其它位置并查看效果。 2. 當前教師列表組件與教師添加組件是父子關系，這使得在添加教師時仍然顯示了教師列表。如果甲方期待兩個組件是并列關系，即訪問http://localhost:4200/add僅顯示添加組件，而訪問http://localhost:4200僅顯示教師列表組件。你的擬解決方案是什么，按此解決方案，應該如何去google關鍵字。 ## 小結 - Angular根據路徑來確認父子組件 - 需要在父組件中指定子組件的位置后，子組件才會成功的顯示 - 在父組中的模板文件中使用`<router-outlet></router-outlet>`來指定子組件的位置 | 名稱 | 地址 | 備注 | | ---------------- | ------------------------------------------------------------ | ---- | | 定義一個基本路由 | [https://www.angular.cn/guide/router#defining-a-basic-route](https://www.angular.cn/guide/router#defining-a-basic-route) | | | 路由配置 | [https://www.angular.cn/guide/router#configuration](https://www.angular.cn/guide/router#configuration) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.4.zip) | |