本節我們快速完善分頁的一個小問題。 當前分頁在分數數據為空時，將如下顯示：  如果僅有一頁數據，將如下顯示：  其實當頁數為0或1時，大可隱藏分頁。我們使用`ngStyle`來快速的實現該功能： ## ngStyle 使用單元測試能夠快速的模擬出當前頁數為0或1頁的情景： ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -31,4 +31,15 @@ describe('PageComponent', () => { fixture.autoDetectChanges(); }); + fit('0頁', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 0 + }); + fixture.detectChanges(); + }); + + }); ``` 效果如下：  Angular提供的`ngStyle`可根據表達式來配置宿主元素的樣式，比如當總頁數大于1時，分頁組件可見；頁數小于等于1時，分頁組件不可見： ```html +++ b/first-app/src/app/clazz/page/page.component.html @@ -1,4 +1,4 @@ -<nav class="row justify-content-md-center"> +<nav class="row justify-content-md-center" [ngStyle]="{'visibility': inputPage.totalPages > 1 ? 'visible' : 'hidden'}"> <ul class="pagination col-md-auto"> ``` 如上所示，`ngStyle`與`ngClass`使用方法基本相同。此時，當`inputPage.totalPages`大于1時，宿主元素將添加`visibility: visible`屬性，否則將添加`visibility: hidden`屬性：  ### 共1頁 ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -41,5 +41,14 @@ describe('PageComponent', () => { fixture.detectChanges(); }); + fit('1頁', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 10 + }); + fixture.detectChanges(); + }); }); ```  ### 共2頁 ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -50,6 +50,15 @@ describe('PageComponent', () => { }); fixture.detectChanges(); }); - + + fit('2頁', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 25 + }); + fixture.detectChanges(); + }); }); ```   ## 代碼測試代碼 肉眼畢竟不可靠，使用代碼來測試會更可靠。重要的是有了單元測試代碼測試的支持，我們再也不用怕其它的團隊伙伴在更新其它功能時破壞當前已有功能了。 ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -2,6 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {PageComponent} from './page.component'; import {Page} from '../../entity/page'; +import {By} from '@angular/platform-browser'; describe('PageComponent', () => { let component: PageComponent; @@ -39,6 +40,8 @@ describe('PageComponent', () => { numberOfElements: 0 }); fixture.detectChanges(); + const navHtml = fixture.debugElement.query(By.css('nav')).nativeElement as HTMLElement; + expect(navHtml.style.visibility).toEqual('hidden'); }); it('1頁', () => { @@ -49,6 +52,8 @@ describe('PageComponent', () => { numberOfElements: 10 }); fixture.detectChanges(); + const navHtml = fixture.debugElement.query(By.css('nav')).nativeElement as HTMLElement; + expect(navHtml.style.visibility).toEqual('hidden'); }); it('2頁', () => { @@ -59,6 +64,8 @@ describe('PageComponent', () => { numberOfElements: 25 }); fixture.detectChanges(); + const navHtml = fixture.debugElement.query(By.css('nav')①).nativeElement as HTMLElement; + expect(navHtml.style.visibility②).toEqual('visible'); }); }); ``` - ① 如上代碼使用了`css`選擇器選擇了`nav`元素。 - ② 按分頁情況對`nav`元素樣式的`visibility`屬性進行了斷言。 ## 向下兼容 由于前面進行重構時的疏忽，我們制造了一個Bug。此時點擊注銷按鈕時控制臺將發生一個404錯誤。  這是由于在前面的小節消除重復的輪子時，由于輪子過多，產生的**不可避免**的問題。 ```typescript +++ b/first-app/src/app/nav/nav.component.ts onSubmit(): void { const url = 'http://angular.api.codedemo.club/teacher/logout'; ?? this.httpClient.get(url) .subscribe(() => this.beLogout.emit(undefined), error => console.log('logout error', error)); } ``` - 此處有個漏網之魚。 - 該魚尚有些歷史問題，你發現了嗎？ 雖然我們可以將`http://angular.api.codedemo.club:81/teacher/logout`變更為`/teacher/logout`來快速的解決該問題。但更深入的問題是：我們如何在以后的項目來規避此類問題？ 在生產項目中，我們在代碼重構過程中，也會遇到類似的問題。且我們認為這個問題是在重構過程中不可規避的。生產項目中的重構往往不是替換一兩行代碼，如果需要重構的輪子比較多，則需要使用步進式重構，今天做一點，明天做一點，而在這個過程我們保證新老兩種模式共同運行。我們把這種需要考慮老的模式運行的做法稱為**向下兼容性**。 比如我們本節中引入了`ApiIntercepter`后，消除請求前綴輪子的同時，還需要保證沒有消除請求前綴的輪子也是正常運轉的。這時候就需要在`ApiIntercepter`上做一些文章，對于當前功能我們需要保證：1. 有前綴的正常請求；2. 沒有前綴的添加前綴。即無論url是`http://angular.api.codedemo.club:81/teacher/logout`還是`/teacher/logout`，都能夠請求正確的后臺地址：`http://angular.api.codedemo.club:81/teacher/logout`。 請發揮下自己的小才能，解決這個問題吧。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | NgStyle | [https://angular.cn/api/common/NgStyle](https://angular.cn/api/common/NgStyle) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.6.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.6.4.zip) |