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

# 手寫組件 以往的組件我們都是使用的angular cli來自動生成，本節(jié)我們手動創(chuàng)建一個(gè)： ## Welcome組件 我們需要一個(gè)歡迎組件來對登錄成功后的用戶顯示歡迎信息，為此在`src/app`文件夾中創(chuàng)建`welcome.component.ts`文件： ```bash panjiedeMacBook-Pro:app panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjiedeMacBook-Pro:app panjie$ tree -L 1 . ├── add ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── edit ├── entity ├── index ├── login ├── personal-center ├── welcome.component.ts ?? ├── x-auth-token.interceptor.spec.ts └── x-auth-token.interceptor.ts 6 directories, 9 files ``` 接著打開該文件，簡單寫些組件初始化的注釋： ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -0,0 +1,6 @@ +// 定義類 +// 使用注解來標(biāo)明它是一個(gè)組件 +// 將組件加入模塊 +// 為組件設(shè)置一個(gè)selector，以使得其它組件能夠使用它 +// 為組件設(shè)置V層模板 +// 新建個(gè)測試文件來測試組件 ``` 接下來分步完成任務(wù)： ## 定義類 ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -1,4 +1,7 @@ // 定義類 +export class WelcomeComponent { + +} // 使用注解來標(biāo)明它是一個(gè)組件 // 將組件加入模塊 // 為組件設(shè)置一個(gè)selector，以使得其它組件能夠使用它 ``` 此時(shí)應(yīng)該注意兩點(diǎn)： - 類名應(yīng)該與文件名保持一致，且以`Component`結(jié)尾。 - 必須加入`export`以使該類能夠被其它文件引用 ## 加注解 ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -1,8 +1,13 @@ // 定義類 +import {Component} from '@angular/core'; + +// 使用注解來標(biāo)明它是一個(gè)組件 +@Component({ + +}) export class WelcomeComponent { } -// 使用注解來標(biāo)明它是一個(gè)組件 // 將組件加入模塊 // 為組件設(shè)置一個(gè)selector，以使得其它組件能夠使用它 // 為組件設(shè)置V層模板 ``` `@Component`位于`'@angular/core'`中，其接收的參數(shù)類型為**對象**。 注解是注釋的一種延伸，使用`@`關(guān)鍵字打頭。相對于普通的注釋，注解不但可以起到對類、屬性、方法等的說明作用，而且可以為其設(shè)置一些屬性或其它更高級的做法。在Angular中，某個(gè)類是一個(gè)組件還是一個(gè)模塊，都是由其類上對應(yīng)的注解實(shí)現(xiàn)的。 比如我們在此使用`@Component`將`WelcomeComponent`類聲明為一個(gè)Angular組件。如果沒有此注解，則`WelcomeComponent`就是一個(gè)普普通通的類，如果我們在此使用`@Module`注解，則`WelcomeComponent`類便成為了Angular的一個(gè)模塊。 除了`@Component`、`@Module`注解外，我們前面還接觸了將類聲明為管道的注解`@Pipe`，將類型的某個(gè)屬性聲明為可對接父組件方法的注解`@Output()`。 ## 加入到模塊 ```typescript +++ b/first-app/src/app/app.module.ts @@ -13,6 +13,7 @@ import {IndexComponent} from './index/index.component'; import { PersonalCenterComponent } from './personal-center/personal-center.component'; import { SexPipe } from './personal-center/sex.pipe'; import {XAuthTokenInterceptor} from './x-auth-token.interceptor'; +import {WelcomeComponent} from './welcome.component'; @NgModule({ @@ -23,7 +24,8 @@ import {XAuthTokenInterceptor} from './x-auth-token.interceptor'; LoginComponent, IndexComponent, PersonalCenterComponent, - SexPipe + SexPipe, + WelcomeComponent ], imports: [ BrowserModule, ``` 組件依賴于模塊，沒有模塊的組件是沒有意義的。 ## 定義selector ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -3,7 +3,7 @@ import {Component} from '@angular/core'; // 使用注解來標(biāo)明它是一個(gè)組件 @Component({ - + selector: 'app-welcome' }) export class WelcomeComponent { ``` 使用`selector`來定義關(guān)鍵字，其它的組件在V層中使用`app-welcome`來加載該組件。 ## 定義V層 V層可以定義一個(gè)單獨(dú)的文件，也可以直接寫在C層中： ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -3,7 +3,8 @@ import {Component} from '@angular/core'; // 使用注解來標(biāo)明它是一個(gè)組件 @Component({ - + selector: 'app-welcome', + template: `<h1 class="text-center">歡迎使用由軟小白開發(fā)的教務(wù)管理系統(tǒng)</h1>` }) export class WelcomeComponent { ``` - 直接定義模板時(shí)使用`template`. - 定義模板文件時(shí)使用`templateUrl` - 可以不定義樣式文件或樣式 ## 測試 手動新建文件welcome.component.spec.ts ```bash panjiedeMacBook-Pro:app panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjiedeMacBook-Pro:app panjie$ tree -L 1 . ├── add ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── edit ├── entity ├── index ├── login ├── personal-center ├── welcome.component.spec.ts ?? ├── welcome.component.ts ├── x-auth-token.interceptor.spec.ts └── x-auth-token.interceptor.ts 6 directories, 10 files ``` 接下來，我們手動一步步的寫一個(gè)測試方法，從而更清晰的明了測試文件代碼的構(gòu)成。 ### 增加測試方法`describe` 測試方法需要寫在`describe('對測試的描述', 回調(diào)函數(shù))`中，所以我們需要在測試文件中首先調(diào)用`describe`方法。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -0,0 +1,3 @@ +describe('welcome', () => { + +}); ``` ### 增加測試用例`fit` 執(zhí)行的測試用例應(yīng)寫到`it('測試用例名稱', 具體要執(zhí)行的回調(diào)函數(shù)中)`，我們在此要測試Welcome組件是否可以初始化成功，則接著應(yīng)該添加`it`方法。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -1,3 +1,5 @@ describe('welcome', () => { + fit('welcome create', () => { + }); }); ``` ### 運(yùn)行測試 使用`ng t`啟動項(xiàng)目，并查看是否運(yùn)行：  如上代碼表明，測試用例**welcome create**成功執(zhí)行，但該方法中沒有任何斷言。按單元測試的邏輯，我們應(yīng)該在單元測試的代碼以代碼的形式來保證代碼的正確性，在單元測試中，我們使用`expect()`關(guān)鍵字，比如我們斷言`1+1`應(yīng)該竺于`2`: ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -1,5 +1,5 @@ describe('welcome', () => { fit('welcome create', () => { - + expect(1 + 1).toBe(2); }); }); ``` 此時(shí)`expect`中的值與`toBe`中的值相同，則表達(dá)斷言通過。表明`expect`中的代碼執(zhí)行結(jié)果是符合預(yù)期的。  ## 創(chuàng)建動態(tài)測試模塊 在Angular的單元測試中，動態(tài)測試模塊運(yùn)行在一個(gè)叫`TestBed`測試機(jī)床中。它`TestBed`提供了配置動態(tài)模塊的相關(guān)方法： ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -1,5 +1,10 @@ +import {TestBed} from '@angular/core/testing'; + describe('welcome', () => { fit('welcome create', () => { - expect(1 + 1).toBe(2); + // 配置動態(tài)測試模塊 + TestBed.configureTestingModule({ + + }); }); }); ``` 預(yù)測試Welcome組件，則需要將其聲明為動態(tài)測試模塊的一部分： ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -1,10 +1,11 @@ import {TestBed} from '@angular/core/testing'; +import {WelcomeComponent} from './welcome.component'; describe('welcome', () => { fit('welcome create', () => { // 配置動態(tài)測試模塊 TestBed.configureTestingModule({ - + declarations: [WelcomeComponent] }); }); }); ``` 進(jìn)模塊進(jìn)行配置后，通過調(diào)用其`compileComponents`完成對該模塊中的組件的編譯（可以理解為C語言中的編譯，即把一種形式轉(zhuǎn)換為另一種形式）工作。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -6,6 +6,6 @@ describe('welcome', () => { // 配置動態(tài)測試模塊 TestBed.configureTestingModule({ declarations: [WelcomeComponent] - }); + }).compileComponents(); }); }); ``` 隨后便可以調(diào)用`TestBed`提供的 來獲取一個(gè)組件實(shí)例了： ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -7,5 +7,8 @@ describe('welcome', () => { TestBed.configureTestingModule({ declarations: [WelcomeComponent] }).compileComponents(); + + const welcomeComponent = TestBed.createComponent(WelcomeComponent); + expect(welcomeComponent).toBeTruthy(); }); }); ``` 測試結(jié)果如下：  而至于使用angular cli自動創(chuàng)建的測試文件為什么與我們手寫的不同，待后面有機(jī)會再共同學(xué)習(xí)。 ## 完善組件 最后，我們?yōu)闅g迎文字添加點(diǎn)顏色，并為其添加一個(gè)上邊距，刪除相關(guān)冗余的注釋： ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -4,12 +4,9 @@ import {Component} from '@angular/core'; // 使用注解來標(biāo)明它是一個(gè)組件 @Component({ selector: 'app-welcome', - template: `<h1 class="text-center">歡迎使用由軟小白開發(fā)的教務(wù)管理系統(tǒng)</h1>` + template: `<h1 class="text-center text-success mt-5 pt-5"> + 歡迎使用由軟小白開發(fā)的教務(wù)管理系統(tǒng)</h1>` }) export class WelcomeComponent { } -// 將組件加入模塊 -// 為組件設(shè)置一個(gè)selector，以使得其它組件能夠使用它 -// 為組件設(shè)置V層模板 -// 新建個(gè)測試文件來測試組件 ```  | 名稱 | 地址 | | --------------- | ------------------------------------------------------------ | | Angular組件概述 | [https://angular.cn/guide/component-overview#creating-a-component-manually](https://angular.cn/guide/component-overview#creating-a-component-manually) | | TestBed | [https://angular.cn/api/core/testing/TestBed](https://angular.cn/api/core/testing/TestBed) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step5.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step5.2.zip) |