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

使用`ng s`啟動(dòng)項(xiàng)目，使用瀏覽器打開(kāi)[http://localhost:4200/](http://localhost:4200/)并使用相關(guān)的用戶(hù)名密碼登錄系統(tǒng)。 > 可用的用戶(hù)名請(qǐng)?jiān)L問(wèn)：[http://angular.api.codedemo.club:81/teacher/](http://angular.api.codedemo.club:81/teacher/)獲取，默認(rèn)密碼為：codedemo.club ## 菜單  當(dāng)前點(diǎn)擊班級(jí)管理菜單時(shí)將跳轉(zhuǎn)到首頁(yè)，為此我們配置班級(jí)管理菜單: ```html +++ b/first-app/src/app/nav/nav.component.html @@ -15,7 +15,7 @@ <a class="nav-link" routerLink="teacher">教師管理</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">班級(jí)管理</a> + <a class="nav-link" routerLink="clazz">班級(jí)管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">學(xué)生管理</a> ``` 如上為班級(jí)管理定義的URL地址為`clazz`，此時(shí)再次點(diǎn)擊班級(jí)管理菜單時(shí)，在控制臺(tái)中將出現(xiàn)無(wú)法匹配相關(guān)路由的錯(cuò)誤：  這是由于我們尚未`clazz`路由設(shè)置任何組件的原因。 ## 設(shè)置路由 在前面的教師管理、個(gè)人中心章節(jié)中，我們是通過(guò)`AppRoutingModule`來(lái)**直接**設(shè)置路由的。在這些路由設(shè)置中有個(gè)共性是：路由對(duì)應(yīng)的所有的組件，都屬于`AppModule`。為了更加的清楚路由的配置過(guò)程，我們對(duì)以下代碼進(jìn)行解讀： `AppModule`在`imports`中聲明了`AppRoutingModule`: ```typescript imports: [ BrowserModule, AppRoutingModule, ?? HttpClientModule, FormsModule, RouterModule ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: XAuthTokenInterceptor, multi: true} ], bootstrap: [IndexComponent] }) export class AppModule { } ``` 此時(shí)`AppModule`便可以使用`AppRoutingModule`的一些功能了（當(dāng)前`AppRoutingModule`未提供任何功能）：  `AppRoutingModule`在`imports`中聲明了`RouterModule.forRoot(routes)`，其中的`routes`即為我們?cè)O(shè)置的路由。 ```typescript @NgModule({ imports: [RouterModule.forRoot(routes)], ?? exports: [RouterModule] }) export class AppRoutingModule { } ``` 所以`AppRoutingModule`實(shí)際上引入了已配置了路由的`RouterModule`  最后`AppRoutingModule`又在`exports`中聲明了`RouterModule`，這相當(dāng)于把`RouterModule`傳送給了`AppModule`:  觀察上圖不難得出：Angular給出的默認(rèn)示例之所以這么做，僅僅是為了將路由定義的代碼由`AppModule`中抽離出來(lái)。所以如果按下圖這樣做，也是可以直接配置路由信息的。  ## 惰性加載 在Angular中可以使用**惰性加載**來(lái)加速項(xiàng)目的啟動(dòng)速度。**惰性加載**也可以稱(chēng)為**按需加載**，即僅當(dāng)用戶(hù)需要某個(gè)模塊時(shí)，才加載某個(gè)模塊。比如我們將班級(jí)管理設(shè)置為惰性加載，系統(tǒng)則在用戶(hù)登錄系統(tǒng)時(shí)不加載班級(jí)管理模塊，而僅在用戶(hù)首次訪問(wèn)`http://localhost:4200/clazz`時(shí)進(jìn)行加載。這樣做可以顯著的提升用戶(hù)打開(kāi)應(yīng)用時(shí)的等待時(shí)間。 ### 配置惰性加載 在路由配置時(shí)可以配置路由的`loadChildren`屬性來(lái)達(dá)到惰性加載的目的： ```typescript +++ b/first-app/src/app/app-routing.module.ts @@ -11,6 +11,10 @@ const routes: Routes = [ path: '', component: WelcomeComponent }, + { + path: 'clazz', + loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule) + }, { path: 'teacher', component: AppComponent ``` - `loadChildren`是路由的一個(gè)屬性，該屬性接收一個(gè)**回調(diào)函數(shù)**，這使得Angular可以在有需求的時(shí)候調(diào)用這個(gè)**回調(diào)函數(shù)**，從而實(shí)現(xiàn)了惰性加載。 - `import(xxx)`是指從`xxx`導(dǎo)入文件，在導(dǎo)入過(guò)程中省略`ts`后綴，所以上述`import`相當(dāng)于`import('./clazz/clazz.module.ts')`。 - `m => m.ClazzModule`這也是一個(gè)**回調(diào)函數(shù)**。`m`為參數(shù)代表前面`import`成功的文件，所以可以使用任意的合法關(guān)鍵來(lái)替換，比如：`f => f.ClazzModule`。`m.ClazzModule`則表示文件中對(duì)應(yīng)的`ClazzModule`類(lèi)。 此時(shí)，當(dāng)請(qǐng)求的url地址以`clazz`打頭時(shí)，則會(huì)惰性加載`loadChildren`中的模塊，并以該模塊中繼續(xù)查找相應(yīng)的路由。為了更加清晰的明了執(zhí)行過(guò)程，我們?cè)谏鲜龆栊约虞d中加入一些日志： ```typescript { path: 'clazz', - loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule) + loadChildren: () => import('./clazz/clazz.module').then(m => { + console.log('開(kāi)始加載，調(diào)用ClazzModule'); + return m.ClazzModule; + }) }, ``` 此時(shí)當(dāng)**首次**點(diǎn)擊**班級(jí)管理**菜單時(shí)，控制臺(tái)將打印一次日志：  ### 定義路由 在訪問(wèn)`clazz`時(shí)，惰性加載將路由的設(shè)置交給了`ClazzModule`。  加之剛剛上圖展示了可以直接在模塊中定義路由，故打開(kāi)`ClazzModule`來(lái)嘗試進(jìn)行路由定義： ```typescript +++ b/first-app/src/app/clazz/clazz.module.ts @@ -6,13 +6,22 @@ import {KlassSelectComponent} from './klass-select/klass-select.component'; import {ClazzComponent} from './clazz.component'; import {PageComponent} from './page/page.component'; import {EditComponent} from './edit/edit.component'; +import {RouterModule, Routes} from '@angular/router'; + +const routes: Routes = [ + { + path: '', + component: ClazzComponent + } +]; @NgModule({ declarations: [AddComponent, KlassSelectComponent, ClazzComponent, PageComponent, EditComponent], imports: [ CommonModule, FormsModule, - ReactiveFormsModule + ReactiveFormsModule, + RouterModule.forChild(routes) ?? ] }) export class ClazzModule { ``` 上述路由的配置基本與`AppRoutingModule`中的配置無(wú)異，不同的是使用惰性加載引用的模塊在進(jìn)行路由配置時(shí)必須使用`forChild()`，而非`forRoot()`。 > `forRoot()` 在應(yīng)用中只應(yīng)該使用一次。  同時(shí)在控制臺(tái)發(fā)生如下錯(cuò)誤（如果你在6.1.3小節(jié)中完成了使用Api攔截器的作業(yè)，則已充分的證明了自己的能力，此處將看不到如下錯(cuò)誤）：  ## 本節(jié)作業(yè) 1. 請(qǐng)找出控制臺(tái)發(fā)生上述404錯(cuò)誤的原因并嘗試修正該錯(cuò)誤。 2. 點(diǎn)擊班級(jí)管理時(shí)，班級(jí)管理的菜單未并像教師管理一樣點(diǎn)亮，請(qǐng)修正它。 | 名稱(chēng) | 鏈接 | | ---------------- | ------------------------------------------------------------ | | 惰性加載特性模塊 | [https://angular.cn/guide/lazy-loading-ngmodules](https://angular.cn/guide/lazy-loading-ngmodules) | | `forRoot()` 模式 | [https://angular.cn/guide/singleton-services#the-forroot-pattern](https://angular.cn/guide/singleton-services#the-forroot-pattern) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip) |