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

我們?cè)谇懊娴男」?jié)中成功地引用了`HttpClient`并使用其發(fā)起了數(shù)據(jù)請(qǐng)求，最終將請(qǐng)求的數(shù)據(jù)成功的顯示到了界面上。在此過(guò)程中，我們普遇到過(guò)如下錯(cuò)誤：  最終通過(guò)在測(cè)試文件的imports中加入了HttpClientModule將該錯(cuò)誤消除。本節(jié)我們將重點(diǎn)討論一下為什么引入了HttpClientModule后錯(cuò)誤就消息了。 在繼續(xù)學(xué)習(xí)以前，我們暫時(shí)移除測(cè)試文件`app.component.spec.ts`中對(duì)`HttpClientModule`的引入： ```typescript imports: [ RouterTestingModule, HttpClientModule ? ], ``` * ? 刪除該行 此時(shí)`ng t`將報(bào)如下錯(cuò)誤：  # 錯(cuò)在哪 解決問(wèn)題的前提是弄明白產(chǎn)生問(wèn)題的原因，找到問(wèn)題產(chǎn)生的原因的前提是找到出錯(cuò)代碼的位置。為了弄清楚到底是哪行代碼導(dǎo)致的異常，我們只保留該測(cè)試中的第一行代碼： ```typescript it('組件初始化', () => { const fixture = TestBed.createComponent(AppComponent); // const app = fixture.componentInstance; // expect(app).toBeTruthy(); // // // 啟用angular的自動(dòng)變更檢測(cè)機(jī)制，自動(dòng)對(duì)V層中的數(shù)據(jù)進(jìn)行渲染 // fixture.autoDetectChanges(); }); ```  異常依舊，此時(shí)我們大概可以確認(rèn)是第一行代碼出現(xiàn)了問(wèn)題。為了避免誤殺，我們?cè)趯⒌谝恍写a也注釋掉： ```typescript it('組件初始化', () => { // const fixture = TestBed.createComponent(AppComponent); // const app = fixture.componentInstance; // expect(app).toBeTruthy(); // // 啟用angular的自動(dòng)變更檢測(cè)機(jī)制，自動(dòng)對(duì)V層中的數(shù)據(jù)進(jìn)行渲染 // fixture.autoDetectChanges(); }); ```  錯(cuò)誤消失，則可以完全確認(rèn)是第一行代碼出了問(wèn)題。隨后移除剛剛第一行代碼的注釋后，我們繼續(xù)學(xué)習(xí)。 >[success] 當(dāng)發(fā)生一些預(yù)期以外的問(wèn)題時(shí)，分塊注釋是個(gè)解決問(wèn)題的好辦法。 ## 組件初始化 對(duì)組件進(jìn)行測(cè)試的前提是創(chuàng)建一個(gè)組件，而創(chuàng)建組件的過(guò)程中必然離不開(kāi)組件的實(shí)例化。為了更好的理解這一過(guò)程，我們對(duì)單元測(cè)試中的相關(guān)代碼并添加相應(yīng)注釋如下： ```typescript it('組件初始化', () => { // 創(chuàng)建一個(gè)夾具，該夾具中實(shí)例化了一個(gè)AppComponent對(duì)象 const fixture = TestBed.createComponent(AppComponent); // 獲取夾具中的AppComponent對(duì)象 // const app = fixture.componentInstance; // 預(yù)測(cè)上述過(guò)程沒(méi)有發(fā)生錯(cuò)誤，即成功獲取到了AppComponent對(duì)象 // expect(app).toBeTruthy(); // 啟用angular的自動(dòng)變更檢測(cè)機(jī)制，自動(dòng)對(duì)V層中的數(shù)據(jù)進(jìn)行渲染 // fixture.autoDetectChanges(); ``` `TestBed.createComponent(AppComponent)`的流程圖大體如下：  通過(guò)該圖片可以得出結(jié)論：錯(cuò)誤產(chǎn)生的原因于Angular在能力初始化的過(guò)程中沒(méi)有設(shè)置提供`HttpClient`的能力。 而這個(gè)能力設(shè)置的對(duì)象，就是本節(jié)中我們將討論的**模塊**。 # 模塊 在Angular中**模塊**是可獨(dú)立運(yùn)行的最小單元，比如我們?cè)趕rc/app文件夾中的app.module.ts的作用就是在聲明一個(gè)**模塊**。 ```bash . ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts └── app.module.ts ?? ``` **組件**依賴(lài)于**模塊**，存在于**模塊**，組件若想成動(dòng)運(yùn)行，則必然是運(yùn)行于某個(gè)**模塊**之中。組件成功運(yùn)行的前提，是在**模塊**中被成功地實(shí)例化，**模塊**能夠成功實(shí)例化某個(gè)**組件**的前提是**模塊**擁有**組件**想要的一切。  ## 測(cè)試模塊 在單元測(cè)試中，我們通過(guò)以下代碼創(chuàng)建一個(gè)測(cè)試模塊： ```typescript beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ RouterTestingModule, ], declarations?: [ AppComponent? ], }).compileComponents(); }); ``` 通過(guò)在?declarations中聲明?AppComponent來(lái)表示：AppComponent組件屬于當(dāng)前測(cè)試模塊。當(dāng)單元測(cè)試發(fā)生錯(cuò)誤時(shí)，我們可以查看到當(dāng)前測(cè)試模塊的身影。  它的名稱(chēng)為DynamicTestModule，即動(dòng)態(tài)測(cè)試模塊，即為當(dāng)前AppComponent組件所在模塊。 一個(gè)**模塊**擁有什么樣的能力，除可以在`declarations`中聲明自身?yè)碛械哪芰σ酝?，還可以在`imports`引用外部的資源。比如當(dāng)前引入了`RouterTestingModule`，則當(dāng)前模塊擁有`RouterTestingModule`提供的相關(guān)能力。 ```typescript imports: [ RouterTestingModule, ], ``` 由于我們要測(cè)試的`AppComponent`并不依賴(lài)于任何`RouterTestingModule`提供的能力，所以在此我們可以將其引入的代碼刪除。 ```typescript import {RouterTestingModule} from '@angular/router/testing'; ? ... imports: [ RouterTestingModule, ? ], ``` ## HttpClientModule `declarations`與`imports`不同的是，前者僅能夠聲明`組件`等**模塊**的成員，而后者則是聲明的其它**模塊**。 與當(dāng)前**動(dòng)態(tài)測(cè)試模塊**相同，**HttpClientModule**也是一個(gè)模塊，該模塊下有一個(gè)**可用**的**HttpClient**成員，所以當(dāng)我們將`HttpClientModule`加入到`imports`中時(shí)： ```typescript imports: [ HttpClientModule ], ``` 相當(dāng)于：  此時(shí)動(dòng)態(tài)測(cè)試模塊便擁有了兩個(gè)成員：自己聲明的`APP組件`以及引入的`HttpClientModule`模塊中的`HttpClient`。所以此時(shí)在執(zhí)行`TestBed.createComponent(AppComponent)`當(dāng)前模塊便擁有了創(chuàng)建`AppComponent`的先決條件。從而使得在動(dòng)態(tài)測(cè)試模塊中成功的創(chuàng)建了`AppComponent` 最后我們憂(yōu)愁單元測(cè)試相關(guān)注釋內(nèi)容： ```typescript it('組件初始化', () => { // 創(chuàng)建一個(gè)夾具，該夾具中實(shí)例化了一個(gè)AppComponent對(duì)象 const fixture = TestBed.createComponent(AppComponent); // 獲取夾具中的AppComponent對(duì)象 const app = fixture.componentInstance; // 預(yù)測(cè)上述過(guò)程沒(méi)有發(fā)生錯(cuò)誤，即成功獲取到了AppComponent對(duì)象 expect(app).toBeTruthy(); // 啟用angular的自動(dòng)變更檢測(cè)機(jī)制，自動(dòng)對(duì)V層中的數(shù)據(jù)進(jìn)行渲染 fixture.autoDetectChanges(); ``` # 依賴(lài)注入 依賴(lài)注入(Dependency Injection)簡(jiǎn)稱(chēng)DI，是大部分框架支持的特性。好像已然成為了面試的必考題了一樣。在此，我們簡(jiǎn)單對(duì)此有個(gè)介紹。  簡(jiǎn)單來(lái)說(shuō)：上圖中的????的過(guò)程稱(chēng)即被稱(chēng)為**依賴(lài)注入**。 因?yàn)????過(guò)程大體實(shí)現(xiàn)了：根據(jù)AppComponent聲明的**依賴(lài)**類(lèi)型`HttpClient`來(lái)將一個(gè)`HttpClient`實(shí)例**注入**給AppComponent。 更準(zhǔn)確的來(lái)講，**依賴(lài)**一詞源于UML類(lèi)圖中的類(lèi)與類(lèi)的一種關(guān)系，表示兩個(gè)類(lèi)之間存在的一種弱關(guān)系，是兩個(gè)類(lèi)耦合最小的一種。比如人類(lèi)當(dāng)前依賴(lài)于手機(jī)、依賴(lài)于網(wǎng)絡(luò)，都是現(xiàn)實(shí)生活中的依賴(lài)的具體體現(xiàn)。 **注入**一詞就是給的意思，但這個(gè)給的操作是Angular主動(dòng)實(shí)施的，是自上而上的，所以稱(chēng)為**注入**更恰當(dāng)一些。 # 總結(jié) 讓我們簡(jiǎn)單總結(jié)下： * 組件不能夠獨(dú)立存在，其必然屬于某個(gè)**模塊** * 一個(gè)模塊的**能力**取決于兩個(gè)方面: * 其`declarations`的聲明的成員 * 其`imports`中聲明模塊的**可用**成員 * 一個(gè)模塊的能力列表決定了其是否有創(chuàng)建某個(gè)組件的能力 # 資源列表 | 名稱(chēng) | 地址 | |---- | ---- | | Angular模塊簡(jiǎn)介 | [https://www.angular.cn/guide/ngmodules](https://www.angular.cn/guide/ngmodules) | | Angular中的依賴(lài)注入 | [https://www.angular.cn/guide/dependency-injection](https://www.angular.cn/guide/dependency-injection) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.2.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.2.3.zip) |