3.4 著陸組件 · Angular入門實例教程

# 著陸組件在一個網站中，我們把首頁又習慣性的稱為著陸頁。這是因為大多數時候首頁是用戶第一個訪問的頁面。在Angular中也有類似的設置，我把它稱為著陸組件，指系統啟動時第一個啟動的組件。在前面的章節中，我們對模塊進行了如下剖析： ![image-20210228173021966](https://img.kancloud.cn/c6/77/c6778e95733b9e82f3a492baa4baeb92_1410x542.png) 其中的`bootstrap`中的元素被標注為`啟動組件`，以當前`AppModule`為例相關代碼如下： ```typescript bootstrap: [AppComponent] }) export class AppModule { } ``` 接下來，我們共同學習在Angular中如何自定義一個啟動組件。 ## 自定義啟動組件項目的`src`文件中有如下文件： ```bash panjiedeMacBook-Pro:src panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src panjiedeMacBook-Pro:src panjie$ tree -L 1 . ├── app ├── assets ├── environments ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css └── test.ts 3 directories, 6 files ``` 這其中的`main.ts`以`index.html`共同決定了當前項目的啟動組件。我們知道組件依存于模塊，一個沒有模塊的組件是沒法被啟動的。 ![image-20210228172606027](https://img.kancloud.cn/14/de/14de94b8e79938eafff7deacb1db77f0_1448x502.png) ### 啟動模塊那么如若指定某個著陸組件，則必然先指定著陸組件所在的模塊，該過程是由`main.ts`來完成的： ```typescript platformBrowserDynamic().bootstrapModule(AppModule) ?? .catch(err => console.error(err)); ``` 在`bootstrapModule`方法中指定了啟動模塊`AppModule`。 ### 啟動組件然后在`index.html`指定了啟動的組件： ```html <body> <app-root></app-root> ?? </body> ``` 只有在啟動模塊中被聲明為啟動組件的組件，才有資格（而且是必須）出現在這里。 `<app-root>`對應的便是AppComponent: ```typescript @Component({ selector: 'app-root', ?? templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ``` ## 新建著陸組件我們新建一個index組件做為著陸組件使用，以期在該組件中實現：如果未登錄則顯示登錄組件，如果已登錄則顯示教師列表。 ```bash panjiedeMacBook-Pro:app panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjiedeMacBook-Pro:app panjie$ ng g c index CREATE src/app/index/index.component.css (0 bytes) CREATE src/app/index/index.component.html (20 bytes) CREATE src/app/index/index.component.spec.ts (619 bytes) CREATE src/app/index/index.component.ts (271 bytes) UPDATE src/app/app.module.ts (884 bytes) ``` 然后做兩項工作：將index組件聲明為啟動組件: ```typescript +++ b/first-app/src/app/app.module.ts @@ -28,7 +28,7 @@ import {IndexComponent} from './index/index.component'; RouterModule ], providers: [], - bootstrap: [AppComponent] + bootstrap: [IndexComponent] }) export class AppModule { } ``` 并在index.html中引用它： ```html +++ b/first-app/src/index.html @@ -8,6 +8,6 @@ <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> - <app-root></app-root> + <app-index></app-index> </body> </html> ``` ### 測試最后使用`ng s`來測試下是否達到了預期效果。 ![image-20210305110928880](https://img.kancloud.cn/15/55/15557ba2bbd276b2151ddadbdbad16f6_988x208.png) It works! ## 登錄功能接下來，我們將登錄組件、教師列表組件加入到著陸組件，并實現：登錄前顯示登錄組件，登錄后顯示教師列表組件。 ### 初始化在V層中增加兩個組件，一個在登錄前顯示，一個在登錄成功后顯示： ```html +++ b/first-app/src/app/index/index.component.html @@ -1 +1,2 @@ -<p>index works!</p> +<app-root *ngIf="login"></app-root> +<app-login *ngIf="!login" ></app-login> ``` C層中初始化login變量： ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -7,6 +7,8 @@ import {Component, OnInit} from '@angular/core'; }) export class IndexComponent implements OnInit { + login = false; + constructor() { } ``` 移動歷史的`fdescribe`以及`fit`，使用`ng t`來啟動index組件，將得到如下錯誤信息： ![image-20210305112058533](https://img.kancloud.cn/4e/2e/4e2e264b09aeb2dd59a6606cfc75b53a_1950x120.png) 這是由于當前動態測試模塊中只聲明了Index組件，所以它是無法解析`<app-root>`以及`<app-login>`兩個html元素的。若使動態測試模塊擁有`<app-root>`以及`<app-login>`的能力，僅僅需要在其模塊中聲明其擁有這兩個組件即可： ```typescript +++ b/first-app/src/app/index/index.component.spec.ts @@ -1,6 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {IndexComponent} from './index.component'; +import {AppComponent} from '../app.component'; +import {LoginComponent} from '../login/login.component'; describe('IndexComponent', () => { let component: IndexComponent; @@ -8,7 +10,7 @@ describe('IndexComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [IndexComponent] + declarations: [IndexComponent, AppComponent, LoginComponent] }) .compileComponents(); }); ``` 錯誤重新顯示為： ![image-20210305112359394](https://img.kancloud.cn/ad/b5/adb5530ea68fda7af4a62375feaf391c_1562x168.png) 使當前模塊擁有提供HttpClient的能力，則需要引用擁有提供HttpClient能力的HttpClientModule： ```typescript +++ b/first-app/src/app/index/index.component.spec.ts @@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {IndexComponent} from './index.component'; import {AppComponent} from '../app.component'; import {LoginComponent} from '../login/login.component'; +import {HttpClientModule} from '@angular/common/http'; describe('IndexComponent', () => { let component: IndexComponent; @@ -10,7 +11,8 @@ describe('IndexComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [IndexComponent, AppComponent, LoginComponent] + declarations: [IndexComponent, AppComponent, LoginComponent], + imports: [HttpClientModule] }) .compileComponents(); }); ``` ![image-20210305112553206](https://img.kancloud.cn/ed/ca/edca4b9f97aaaaaeacf574f00cae6c66_1282x118.png) 繼續引用能夠解析`ngModel`指令的`FormsModule`模塊： ```typescript +++ b/first-app/src/app/index/index.component.spec.ts @@ -4,6 +4,7 @@ import {IndexComponent} from './index.component'; import {AppComponent} from '../app.component'; import {LoginComponent} from '../login/login.component'; import {HttpClientModule} from '@angular/common/http'; +import {FormsModule} from '@angular/forms'; describe('IndexComponent', () => { let component: IndexComponent; @@ -12,7 +13,7 @@ describe('IndexComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [IndexComponent, AppComponent, LoginComponent], - imports: [HttpClientModule] + imports: [HttpClientModule, FormsModule] }) .compileComponents(); }); ``` 最后錯誤消失，成功啟動組件并顯示登錄組件。 ![image-20210305120532468](https://img.kancloud.cn/21/59/21599a3985132629c061049cc7c545a4_1224x534.png) 最后，做為小白的我們在使用`ng t`時最為關鍵的一步，加入自動變更檢測相關的代碼： ```typescript +++ b/first-app/src/app/index/index.component.spec.ts @@ -26,5 +26,6 @@ describe('IndexComponent', () => { fit('should create', () => { expect(component).toBeTruthy(); + fixture.autoDetectChanges(); }); }); ``` ## 父子組件當下我們有三個組件：做為父組件的Index，以及做為子組件Login、App。若要使登錄子組件將登錄成功的通知發送給其父組件Index，則可以向Login中注入父組件： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {IndexComponent} from '../index/index.component'; @Component({ selector: 'app-login', @@ -12,7 +13,8 @@ export class LoginComponent implements OnInit { password: string }; - constructor(private httpClient: HttpClient) { + constructor(private httpClient: HttpClient, + private indexComponent: IndexComponent) { } ngOnInit(): void { @@ -31,7 +33,7 @@ export class LoginComponent implements OnInit { .get( 'http://angular.api.codedemo.club:81/teacher/login', {headers: httpHeaders}) - .subscribe(teacher => console.log(teacher), + .subscribe(teacher => this.indexComponent.login = true, error => console.log('發生錯誤, 登錄失敗', error)); } } ``` 登錄成功后，將Index組件中的login屬性設置為true。此時在輸入正確的用戶名密碼并點擊登錄后，將成功的顯示教師列表組件： ![image-20210305121257833](https://img.kancloud.cn/0a/7b/0a7b7f1208bab18e46c08a1e5692296d_1416x542.png) ?? ![image-20210305121333839](https://img.kancloud.cn/0e/a2/0ea2f865f7fc06074f606dc60eb72118_1520x514.png) 登錄功能成功實現，現在我們可以使用`ng s`來運行項目，并查看在其中的表現了。 ## 本節作業登錄成功后，在控制中將會發生一個異常。你知道此異常產生的原因嗎？如果知道，那么嘗試把它解決掉。 | 名稱 | 地址 | 備注 | | -------- | ------------------------------------------------------------ | ---- | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step3.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step3.4.zip) | |