# 手寫組件 以往的組件我們都是使用的angular cli來自動生成，本節我們手動創建一個： ## Welcome組件 我們需要一個歡迎組件來對登錄成功后的用戶顯示歡迎信息，為此在`src/app`文件夾中創建`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 @@ +// 定義類 +// 使用注解來標明它是一個組件 +// 將組件加入模塊 +// 為組件設置一個selector，以使得其它組件能夠使用它 +// 為組件設置V層模板 +// 新建個測試文件來測試組件 ``` 接下來分步完成任務： ## 定義類 ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -1,4 +1,7 @@ // 定義類 +export class WelcomeComponent { + +} // 使用注解來標明它是一個組件 // 將組件加入模塊 // 為組件設置一個selector，以使得其它組件能夠使用它 ``` 此時應該注意兩點： - 類名應該與文件名保持一致，且以`Component`結尾。 - 必須加入`export`以使該類能夠被其它文件引用 ## 加注解 ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -1,8 +1,13 @@ // 定義類 +import {Component} from '@angular/core'; + +// 使用注解來標明它是一個組件 +@Component({ + +}) export class WelcomeComponent { } -// 使用注解來標明它是一個組件 // 將組件加入模塊 // 為組件設置一個selector，以使得其它組件能夠使用它 // 為組件設置V層模板 ``` `@Component`位于`'@angular/core'`中，其接收的參數類型為**對象**。 注解是注釋的一種延伸，使用`@`關鍵字打頭。相對于普通的注釋，注解不但可以起到對類、屬性、方法等的說明作用，而且可以為其設置一些屬性或其它更高級的做法。在Angular中，某個類是一個組件還是一個模塊，都是由其類上對應的注解實現的。 比如我們在此使用`@Component`將`WelcomeComponent`類聲明為一個Angular組件。如果沒有此注解，則`WelcomeComponent`就是一個普普通通的類，如果我們在此使用`@Module`注解，則`WelcomeComponent`類便成為了Angular的一個模塊。 除了`@Component`、`@Module`注解外，我們前面還接觸了將類聲明為管道的注解`@Pipe`，將類型的某個屬性聲明為可對接父組件方法的注解`@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'; // 使用注解來標明它是一個組件 @Component({ - + selector: 'app-welcome' }) export class WelcomeComponent { ``` 使用`selector`來定義關鍵字，其它的組件在V層中使用`app-welcome`來加載該組件。 ## 定義V層 V層可以定義一個單獨的文件，也可以直接寫在C層中： ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -3,7 +3,8 @@ import {Component} from '@angular/core'; // 使用注解來標明它是一個組件 @Component({ - + selector: 'app-welcome', + template: `<h1 class="text-center">歡迎使用由軟小白開發的教務管理系統</h1>` }) export class WelcomeComponent { ``` - 直接定義模板時使用`template`. - 定義模板文件時使用`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 ``` 接下來，我們手動一步步的寫一個測試方法，從而更清晰的明了測試文件代碼的構成。 ### 增加測試方法`describe` 測試方法需要寫在`describe('對測試的描述', 回調函數)`中，所以我們需要在測試文件中首先調用`describe`方法。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -0,0 +1,3 @@ +describe('welcome', () => { + +}); ``` ### 增加測試用例`fit` 執行的測試用例應寫到`it('測試用例名稱', 具體要執行的回調函數中)`，我們在此要測試Welcome組件是否可以初始化成功，則接著應該添加`it`方法。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -1,3 +1,5 @@ describe('welcome', () => { + fit('welcome create', () => { + }); }); ``` ### 運行測試 使用`ng t`啟動項目，并查看是否運行：  如上代碼表明，測試用例**welcome create**成功執行，但該方法中沒有任何斷言。按單元測試的邏輯，我們應該在單元測試的代碼以代碼的形式來保證代碼的正確性，在單元測試中，我們使用`expect()`關鍵字，比如我們斷言`1+1`應該竺于`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); }); }); ``` 此時`expect`中的值與`toBe`中的值相同，則表達斷言通過。表明`expect`中的代碼執行結果是符合預期的。  ## 創建動態測試模塊 在Angular的單元測試中，動態測試模塊運行在一個叫`TestBed`測試機床中。它`TestBed`提供了配置動態模塊的相關方法： ```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); + // 配置動態測試模塊 + TestBed.configureTestingModule({ + + }); }); }); ``` 預測試Welcome組件，則需要將其聲明為動態測試模塊的一部分： ```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', () => { // 配置動態測試模塊 TestBed.configureTestingModule({ - + declarations: [WelcomeComponent] }); }); }); ``` 進模塊進行配置后，通過調用其`compileComponents`完成對該模塊中的組件的編譯（可以理解為C語言中的編譯，即把一種形式轉換為另一種形式）工作。 ```typescript +++ b/first-app/src/app/welcome.component.spec.ts @@ -6,6 +6,6 @@ describe('welcome', () => { // 配置動態測試模塊 TestBed.configureTestingModule({ declarations: [WelcomeComponent] - }); + }).compileComponents(); }); }); ``` 隨后便可以調用`TestBed`提供的 來獲取一個組件實例了： ```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(); }); }); ``` 測試結果如下：  而至于使用angular cli自動創建的測試文件為什么與我們手寫的不同，待后面有機會再共同學習。 ## 完善組件 最后，我們為歡迎文字添加點顏色，并為其添加一個上邊距，刪除相關冗余的注釋： ```typescript +++ b/first-app/src/app/welcome.component.ts @@ -4,12 +4,9 @@ import {Component} from '@angular/core'; // 使用注解來標明它是一個組件 @Component({ selector: 'app-welcome', - template: `<h1 class="text-center">歡迎使用由軟小白開發的教務管理系統</h1>` + template: `<h1 class="text-center text-success mt-5 pt-5"> + 歡迎使用由軟小白開發的教務管理系統</h1>` }) export class WelcomeComponent { } -// 將組件加入模塊 -// 為組件設置一個selector，以使得其它組件能夠使用它 -// 為組件設置V層模板 -// 新建個測試文件來測試組件 ```  | 名稱 | 地址 | | --------------- | ------------------------------------------------------------ | | 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) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step5.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step5.2.zip) |