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

本節(jié)我們快速完善分頁(yè)的一個(gè)小問(wèn)題。 當(dāng)前分頁(yè)在分?jǐn)?shù)數(shù)據(jù)為空時(shí)，將如下顯示：  如果僅有一頁(yè)數(shù)據(jù)，將如下顯示：  其實(shí)當(dāng)頁(yè)數(shù)為0或1時(shí)，大可隱藏分頁(yè)。我們使用`ngStyle`來(lái)快速的實(shí)現(xiàn)該功能： ## ngStyle 使用單元測(cè)試能夠快速的模擬出當(dāng)前頁(yè)數(shù)為0或1頁(yè)的情景： ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -31,4 +31,15 @@ describe('PageComponent', () => { fixture.autoDetectChanges(); }); + fit('0頁(yè)', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 0 + }); + fixture.detectChanges(); + }); + + }); ``` 效果如下：  Angular提供的`ngStyle`可根據(jù)表達(dá)式來(lái)配置宿主元素的樣式，比如當(dāng)總頁(yè)數(shù)大于1時(shí)，分頁(yè)組件可見(jiàn)；頁(yè)數(shù)小于等于1時(shí)，分頁(yè)組件不可見(jiàn)： ```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`使用方法基本相同。此時(shí)，當(dāng)`inputPage.totalPages`大于1時(shí)，宿主元素將添加`visibility: visible`屬性，否則將添加`visibility: hidden`屬性：  ### 共1頁(yè) ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -41,5 +41,14 @@ describe('PageComponent', () => { fixture.detectChanges(); }); + fit('1頁(yè)', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 10 + }); + fixture.detectChanges(); + }); }); ```  ### 共2頁(yè) ```typescript +++ b/first-app/src/app/clazz/page/page.component.spec.ts @@ -50,6 +50,15 @@ describe('PageComponent', () => { }); fixture.detectChanges(); }); - + + fit('2頁(yè)', () => { + component.page = new Page<any>({ + content: [], + number: 0, + size: 20, + numberOfElements: 25 + }); + fixture.detectChanges(); + }); }); ```   ## 代碼測(cè)試代碼 肉眼畢竟不可靠，使用代碼來(lái)測(cè)試會(huì)更可靠。重要的是有了單元測(cè)試代碼測(cè)試的支持，我們?cè)僖膊挥门缕渌膱F(tuán)隊(duì)伙伴在更新其它功能時(shí)破壞當(dāng)前已有功能了。 ```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頁(yè)', () => { @@ -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頁(yè)', () => { @@ -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`元素。 - ② 按分頁(yè)情況對(duì)`nav`元素樣式的`visibility`屬性進(jìn)行了斷言。 ## 向下兼容 由于前面進(jìn)行重構(gòu)時(shí)的疏忽，我們制造了一個(gè)Bug。此時(shí)點(diǎn)擊注銷按鈕時(shí)控制臺(tái)將發(fā)生一個(gè)404錯(cuò)誤。  這是由于在前面的小節(jié)消除重復(fù)的輪子時(shí)，由于輪子過(guò)多，產(chǎn)生的**不可避免**的問(wèn)題。 ```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)); } ``` - 此處有個(gè)漏網(wǎng)之魚(yú)。 - 該魚(yú)尚有些歷史問(wèn)題，你發(fā)現(xiàn)了嗎？ 雖然我們可以將`http://angular.api.codedemo.club:81/teacher/logout`變更為`/teacher/logout`來(lái)快速的解決該問(wèn)題。但更深入的問(wèn)題是：我們?nèi)绾卧谝院蟮捻?xiàng)目來(lái)規(guī)避此類問(wèn)題？ 在生產(chǎn)項(xiàng)目中，我們?cè)诖a重構(gòu)過(guò)程中，也會(huì)遇到類似的問(wèn)題。且我們認(rèn)為這個(gè)問(wèn)題是在重構(gòu)過(guò)程中不可規(guī)避的。生產(chǎn)項(xiàng)目中的重構(gòu)往往不是替換一兩行代碼，如果需要重構(gòu)的輪子比較多，則需要使用步進(jìn)式重構(gòu)，今天做一點(diǎn)，明天做一點(diǎn)，而在這個(gè)過(guò)程我們保證新老兩種模式共同運(yùn)行。我們把這種需要考慮老的模式運(yùn)行的做法稱為**向下兼容性**。 比如我們本節(jié)中引入了`ApiIntercepter`后，消除請(qǐng)求前綴輪子的同時(shí)，還需要保證沒(méi)有消除請(qǐng)求前綴的輪子也是正常運(yùn)轉(zhuǎn)的。這時(shí)候就需要在`ApiIntercepter`上做一些文章，對(duì)于當(dāng)前功能我們需要保證：1. 有前綴的正常請(qǐng)求；2. 沒(méi)有前綴的添加前綴。即無(wú)論url是`http://angular.api.codedemo.club:81/teacher/logout`還是`/teacher/logout`，都能夠請(qǐng)求正確的后臺(tái)地址：`http://angular.api.codedemo.club:81/teacher/logout`。 請(qǐng)發(fā)揮下自己的小才能，解決這個(gè)問(wèn)題吧。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | NgStyle | [https://angular.cn/api/common/NgStyle](https://angular.cn/api/common/NgStyle) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.6.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.6.4.zip) |