久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

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