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

代碼未動(dòng)，原型先行。本章的新增學(xué)生組件，我們設(shè)計(jì)原型如下：  由原型可知，在該組件中需要一個(gè)班級列表的子組件。雖然我們也可以在單元測試的幫助下，在新增學(xué)生組件開發(fā)過程中使用一個(gè)Mock的班級列表組件。但這不夠直觀，所以不太適合于新手。 ## 溫故之新 我們在班級管理中，新建了一個(gè)教師選擇組件：  其實(shí)這種做法是不符合模塊化開發(fā)的概念的。試想既然是教師選擇組件，則是對教師進(jìn)行（查詢）操作，那么更易找的思想應(yīng)該是建立在教師模塊中，而非班級模塊中。  如果項(xiàng)目中增加一個(gè)課程管理，每個(gè)課程同樣需要對應(yīng)一位教師。則在課程管理中仍然需要一個(gè)教師選擇組件。 假設(shè)開發(fā)課程管理的成員與開發(fā)班級管理的成員是不同的人，試想開發(fā)課程管理的成員如何能夠猜出班級管理模塊還存在一個(gè)自己需要的教師選擇列表組件呢？ 所以此時(shí)大概率的事件就是負(fù)責(zé)開發(fā)課程管理的成員，再開發(fā)一個(gè)在自己課程管理模塊中使用的教師列表組件，而這明顯是在造重復(fù)的輪子。這個(gè)重復(fù)的輪子之所以被造出，本質(zhì)上來講是由于班級管理中的教師選擇組件的位置放的有問題。 ## 建在哪？ 在團(tuán)隊(duì)項(xiàng)目中，每個(gè)文件建立的位置都是需要考究的。我們應(yīng)該把文件建立在**好找**的位置上，當(dāng)其它的團(tuán)隊(duì)成員上手項(xiàng)目時(shí)，能夠根據(jù)自己的**感覺**或是**習(xí)慣**快速的找到它。 教師選擇組件建立教師模塊中，班級選擇組件建立班級模塊中，當(dāng)下來看是最**好找**的方案。 如此說來，班級選擇組件當(dāng)前是需要建立在班級模塊中。是的，的確是這樣。但是需要一個(gè)小技巧，即在建立前需要建立個(gè)子模塊。 ## "子"模塊 在上章中我們定制路由時(shí)講過了惰性加載，惰性加載使得Angular可以將多個(gè)模塊按需要加載，這樣大大降低了用戶首次加載的時(shí)間，有效地是提升了用戶的使用感受。其實(shí)整個(gè)Angular的模塊化設(shè)計(jì)也正是基于此，按需要加載的思想貫穿了整個(gè)Angular應(yīng)用。 如果直接將班級選擇組件建立在班級模塊中，Angular則在進(jìn)行學(xué)生添加時(shí)將如下加載：  這在功能實(shí)現(xiàn)上是沒有任何問題的。但學(xué)生模塊僅僅需要班級模塊的**班級選擇組件**，這種方案卻把**班級列表**、**班級新增**、**班級編輯**組件一并發(fā)放了過來。最直接的后果就是當(dāng)用戶使用學(xué)生添加功能時(shí)，Angular需要加載整個(gè)班級模塊，這其實(shí)是與Angular的模塊化概念相違背的。如果增加了**"子"模塊**，事情就不一樣了：  此時(shí)學(xué)生模塊僅僅需要引用班級選擇模塊即可，該模塊中僅僅存在一個(gè)班級選擇組件，這樣以來便與Angular的按需加載相契合了。 我們將**"子"模塊**中的**子**加了引號，是由于該模塊僅僅看起來是一個(gè)子模塊，而在實(shí)際上卻是一個(gè)完完全全獨(dú)立的模塊。  該模塊看起來是一個(gè)子模塊的原因在定義此模塊的文件的位置位于其它模塊之中，除此此外，它與班級模塊、學(xué)生模塊是完全的并列、平行關(guān)系。 ## 初始化 即然它是班級模塊的**"子"**模塊，那么我們將其初始化至班級模塊所在文件夾`src/app/clazz`中： ```bash panjie@panjies-iMac clazz % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/clazz panjie@panjies-iMac clazz % ng g m clazz-select CREATE src/app/clazz/clazz-select/clazz-select.module.ts (197 bytes) ``` 如此我們便在當(dāng)前文件夾下建立了一個(gè)名稱為`clazz-select`的子文件夾，在該子文件夾下建立了`class-select.module.ts`文件： ```bash panjie@panjies-iMac clazz % tree clazz-select clazz-select └── clazz-select.module.ts 0 directories, 1 file ``` 接下來，我們**仍然**在`src/app/clazz`路徑下執(zhí)行創(chuàng)建組件命令，注意路徑是`src/app/clazz`，**不**是`src/app/clazz/clazz-select`。在創(chuàng)建組件時(shí)，我們增加一人`-m`參考，以將組件加入到特定的`ClassSelectModule`中。 ```bash panjie@panjies-iMac clazz % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/clazz panjie@panjies-iMac clazz % ng g c clazzSelect -m clazz-select ?? CREATE src/app/clazz/clazz-select/clazz-select.component.css (0 bytes) CREATE src/app/clazz/clazz-select/clazz-select.component.html (27 bytes) CREATE src/app/clazz/clazz-select/clazz-select.component.spec.ts (662 bytes) CREATE src/app/clazz/clazz-select/clazz-select.component.ts (298 bytes) UPDATE src/app/clazz/clazz-select/clazz-select.module.ts (282 bytes) ``` - `clazz-select`為模塊文件名，此時(shí)Angular會(huì)查找`clazz-select.module.ts`文件。 此時(shí)`src/app/clazz/clazz-select`文件夾中有4個(gè)文件，分別是組件的3個(gè)文件，模塊的一個(gè)文件以及組件測試的一個(gè)文件。 ```bash panjie@panjies-iMac clazz % tree clazz-select clazz-select ├── clazz-select.component.css ├── clazz-select.component.html ├── clazz-select.component.spec.ts ├── clazz-select.component.ts └── clazz-select.module.ts 0 directories, 5 files ``` `ClazzSelectComponent`被聲明在`ClazzSelectModule`模塊中: ```typescript @NgModule({ declarations: [ClazzSelectComponent], imports: [ CommonModule ] }) export class ClazzSelectModule { } ``` ## 注意 如果你在創(chuàng)建組件時(shí)忘記加入了`-m`參數(shù)，則該組件會(huì)自動(dòng)加入到`ClazzModule`中。此時(shí)你需要?jiǎng)h除`ClazzModule`中的`ClazzSelectComponent`，以及對代碼`import {`ClazzSelectComponent`} from clazz-select/clazz-select.component.ts`。 ## 功能實(shí)現(xiàn) 獲取所有的班級對應(yīng)的后臺(tái)API信息為： ```bash GET /clazz/allOfCurrentTeacher ``` | **類型Type** | **名稱Name** | **描述Description** | 必填 | **類型Schema** | 默認(rèn)值 | | :----------- | :----------- | :------------------ | :--- | :------------- | :----- | | Response響應(yīng) | | Status Code: 200 | | `Array<Clazz>` | | 依此對應(yīng)建立MockApi如下： ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -114,6 +114,21 @@ export class ClazzMockApi implements MockApiInterface { { method: 'DELETE', url: '/clazz/(\\d+)' + }, + { + method: 'GET', + url: '/clazz/allOfCurrentTeacher', + result: () => { + const result = []; + for (let i = 1; i <= 10; i++) { + const clazz = { + id: i, + name: randomString('班級名稱') + } as Clazz; + result.push(clazz); + } + return result; + } } ]; } ``` 此處MockApi的url命名為`allOfCurrentTeacher`，表示：獲取當(dāng)前登錄教師負(fù)責(zé)的所有的班級。 好了，本節(jié)就到這里。 ## 本節(jié)作業(yè) 參考教師列表組件，完成支持`FormControl`的班級列表組件。注意：支持`FormControl`后，該組件并不需要`@Output()`以及`@Input()`了。 | 名稱 | 鏈接 | | ---------------- | ------------------------------------------------------------ | | 本節(jié)源碼(含答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step7.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.1.zip) |