參考上節的內容，我們按下面的步驟完成編輯功能前臺的初始化操作： 1. 組件C層初始化。 2. 新建組件V層初始化。 3. 將組件添加到對應的模塊中。 4. 建立路由與組件進行關聯。 # 初始化 ## C層 和前面的增加數據組件的命名方式相似，我們將其命名為：teacher-edit.component.ts ```js import {Component, OnInit} from '@angular/core'; @Component({ templateUrl: './teacher-edit.component.html' }) export class TeacherEditComponent implements OnInit { ngOnInit(): void { } } ``` ## V層 teacher-edit.component.html ```html teacher edit! ``` 添加新文件后目錄結構如下： ``` . ├── app-routing.module.ts ├── app.component.html ├── app.component.sass ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── teacher-add.component.html ├── teacher-add.component.ts ├── teacher-edit.component.html └── teacher-edit.component.ts ``` ## 組件添加到模塊 app.module.ts ```js import {TeacherEditComponent} from './teacher-edit.component'; ? @NgModule({ declarations: [ AppComponent, TeacherAddComponent, TeacherEditComponent ? ], ``` > 使用“?”來標記出文件變動的位置，同時說明該知識點前面的章節已經涉及過，此處不再重復講解。 ## 路由 app-routing.module.ts ```js import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; import {TeacherAddComponent} from './teacher-add.component'; import {TeacherEditComponent} from './teacher-edit.component'; ? const routes: Routes = [ { path: 'add', component: TeacherAddComponent }, { ? path: 'edit', ? component: TeacherEditComponent ? } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` * ? 在數組中添加新對象 ## 測試  # 獲取URL中的參數 在編輯數據前，我們需要通過`URL`來獲取用戶當前需要編輯教師的ID。比如用戶需要編輯ID為1的教師，則`URL`應該是[http://localhost:4200/edit/1](http://localhost:4200/edit/1)或[http://localhost:4200/edit?id=1](http://localhost:4200/edit?id=1)或者更新新穎的[http://localhost:4200/edit;d=1](http://localhost:4200/edit;d=1)形式。 ## PATH模式 [http://localhost:4200/edit/1](http://localhost:4200/edit/1)是以后我們在項目中使用的最多，也是最常見的一種，定義路由及獲取路由參數的方法相對較簡單容易理解，我們又常稱這種方法為`PATH模式`。 AppRoutingModule ```js const routes: Routes = [ { path: 'add', component: TeacherAddComponent }, { path: 'edit/:id', ? component: TeacherEditComponent } ]; ``` * ? 使用具體的id值來替換`:id`，即達到傳入參數的目的。比如`edit/1`表示傳入的`id`值為1 路由定義完成后，我們[http://localhost:4200/edit/1](http://localhost:4200/edit/1)，并嘗試在`TeacherEditComponent`中獲取該`路由參數`的值。 ### 獲取路由參數的值 teacher-edit.component.ts ```js import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; ? @Component({ templateUrl: './teacher-edit.component.html' }) export class TeacherEditComponent implements OnInit { constructor(private route: ActivatedRoute ?) { } ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); ? console.log(id); ? } } ``` * ? 調用路由對象的`快照`屬性的`參數Map`屬性的`get()`方法，傳入要獲取參數的關鍵字`id`來獲取參數的值 ### 測試  ## GET模式 在很多常的項目中，使用最常用的`get`方式在參數中使用`?key1=value1*key2=value2`的方法來進行傳值仍然是首選。雖然我們并不推薦這么做，但某些特殊的情況下我們的確也需要借助該方法來傳值。在`GET模式`，訪問地址為：[http://localhost:4200/edit?id=1](http://localhost:4200/edit?id=1)。 ### 修改路由 app-routing.module.ts ```js { path: 'edit', ? component: TeacherEditComponent } ``` * ? 由`edit/:id`修正為`edit`。 ### 獲取GET參數的值 teacher-edit.component.ts ```js ngOnInit(): void { const id = this.route.snapshot.queryParamMap.get('id'); ? console.log(id); } ``` * ? 由this.route.snapshot.`paramMap`.get('id');修正為this.route.snapshot.`queryParamMap`.get('id'); ### 測試 訪問：[http://localhost:4200/edit?id=1](http://localhost:4200/edit?id=1)  ## 矩陣URL 另有一種URL寫法是[http://localhost:4200/edit;d=1](http://localhost:4200/edit;id=1)，它被稱為`Matrix URL 矩陣URL`，寫法首次提出是在[1996 提案](http://www.w3.org/DesignIssues/MatrixURIs.html)中，提出者是 Web 的奠基人：Tim Berners-Lee。在angular中，獲取該參數值的方法同`PATH模式`相同。 TeacherEditComponent ```js ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); ? console.log(id); } ``` ### 測試  # 本節作業 把路由恢復為`PATH`模式，并在V層中直接顯示獲取到的`id`的值。 **作業完成后請繼續學習** # 定義請求接口規范 現在，我們可以為后臺定義一個接口規范。然后將此規范發送給后臺成員，最終待后臺開發完成后完成對接了。在進行某個特定的數據請求時，我們會這樣定義：方法`GET`、地址`資源名\資源ID`，比如此時我們需要定的接口地址為：方法：`GET`、地址：`Teacher\<id>`。 > `Teacher\<id>`表示，此地址需要被特定的`id`值覆蓋且`id`為必選項，比如`id = 1`則此地址為：`Teacher\1`。 ## C層完成對接 由URL中獲取到了教師的ID，并且剛剛也定義了請求的接口規范，此時我們便可以參考前面的小節完成模擬的數據請求了。 TeacherEditComponent ```js import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {HttpClient} from '@angular/common/http'; ① @Component({ templateUrl: './teacher-edit.component.html' }) export class TeacherEditComponent implements OnInit { public teacher: any; constructor(private route: ActivatedRoute, private httpClient: HttpClient ②) { } ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); const url = 'http://localhost:8080/Teacher/' + id; this.httpClient.get(url) ③ .subscribe((data) => { this.teacher = data; }, () => { console.log(`請求 ${url} 時發生錯誤`); ? }); } } ``` * ? 拼接請求地址 * ? 注意此時``console.log(`直接引用變量的字符串`)``中使用的是 `` ` `` (ESC下邊、數字1左邊、TAB上邊那個以前或許沒用過的按鍵)，而不是 ` ' ` 。``console.log(`請求 ${url} 時發生錯誤`)`` 等價于`console.log('請求 ' + url + ' 時發生錯誤');` 為了提升開發的效率、降低開發的難度，此時在V層直接打印這個教師。 teacher-edit.component.html ```html <pre>{{teacher | json}}</pre> ``` ## 測試  > 在沒有后臺的情況下，注定會發生請求錯語。 ## 總結 1. **paramMap**獲取PATH模式下及矩陣模式下的傳值，**queryParamMap**獲取GET模式下的傳值。 2. PATH模式下，需要在路由中定義參數名稱；矩陣模式下及GET模式下，**不**需要在路由中定義參數名稱。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | *Snapshot*（快照）：當不需要 Observable 時的替代品 | [https://www.angular.cn/guide/router#snapshot-the-no-observable-alternative](https://www.angular.cn/guide/router#snapshot-the-no-observable-alternative) | 2 | | 路由參數 | [https://www.angular.cn/guide/router#route-parameters](https://www.angular.cn/guide/router#route-parameters) | 3 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.1) | - |