fix(module:button): fix order of DOM nodes in button (#3578)

close #3079
NG-ZORRO · Jun 15, 2019 · c3df8b5 · c3df8b5
1 parent 45e84e8
commit c3df8b5
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 18 deletions.
diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html
@@ -1,18 +1,21 @@
 <span (cdkObserveContent)="checkContent()" #contentElement><ng-content></ng-content></span>
-<span class="ant-badge-status-dot ant-badge-status-{{nzStatus || presetColor}}" [style.background]="!presetColor && nzColor" *ngIf="nzStatus || nzColor" [ngStyle]="nzStyle"></span>
+<span class="ant-badge-status-dot ant-badge-status-{{nzStatus || presetColor}}"
+      [style.background]="!presetColor && nzColor"
+      *ngIf="nzStatus || nzColor"
+      [ngStyle]="nzStyle"></span>
 <span class="ant-badge-status-text" *ngIf="nzStatus || nzColor">{{ nzText }}</span>
 <ng-container *nzStringTemplateOutlet="nzCount">
   <sup class="ant-scroll-number"
-    *ngIf="showSup"
-    @zoomBadgeMotion
-    [ngStyle]="nzStyle"
-    [class.ant-badge-count]="!nzDot"
-    [class.ant-badge-dot]="nzDot"
-    [class.ant-badge-multiple-words]="countArray.length>=2">
+       *ngIf="showSup"
+       @zoomBadgeMotion
+       [ngStyle]="nzStyle"
+       [class.ant-badge-count]="!nzDot"
+       [class.ant-badge-dot]="nzDot"
+       [class.ant-badge-multiple-words]="countArray.length>=2">
     <ng-container *ngFor="let n of maxNumberArray;let i = index;">
       <span class="ant-scroll-number-only"
-        *ngIf="count <= nzOverflowCount"
-        [style.transform]="'translateY(' + (-countArray[i] * 100) + '%)'">
+            *ngIf="count <= nzOverflowCount"
+            [style.transform]="'translateY(' + (-countArray[i] * 100) + '%)'">
           <ng-container *ngIf="(!nzDot)&&(countArray[i]!=null)">
             <p *ngFor="let p of countSingleArray" [class.current]="p === countArray[i]">{{ p }}</p>
           </ng-container>

diff --git a/components/button/nz-button.component.html b/components/button/nz-button.component.html
@@ -1,2 +1,2 @@
 <i nz-icon type="loading" *ngIf="nzLoading"></i>
-<span (cdkObserveContent)="checkContent()" #contentElement><ng-content></ng-content></span>
+<span #contentElement><ng-content></ng-content></span>
diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { ContentObserver } from '@angular/cdk/observers';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -25,7 +26,8 @@ import {
   Renderer2,
   SimpleChanges,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  ViewRef
 } from '@angular/core';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
@@ -42,6 +44,8 @@ import {
   NZ_WAVE_GLOBAL_CONFIG
 } from 'ng-zorro-antd/core';
 import { NzIconDirective } from 'ng-zorro-antd/icon';
+import { Subject } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
 
 export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default' | 'link';
 export type NzButtonShape = 'circle' | 'round' | null;
@@ -59,6 +63,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
   readonly el: HTMLElement = this.elementRef.nativeElement;
   private iconElement: HTMLElement;
   private iconOnly = false;
+  private destroy$ = new Subject();
   @ViewChild('contentElement', { static: true }) contentElement: ElementRef;
   @ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList<ElementRef>;
   @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(
@@ -113,7 +118,9 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
     }
     this.setClassMap();
     this.updateIconDisplay(this.nzLoading);
-    this.cdr.detectChanges();
+    if (!(this.cdr as ViewRef).destroyed) {
+      this.cdr.detectChanges();
+    }
   }
 
   moveIcon(): void {
@@ -133,6 +140,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
     private elementRef: ElementRef,
     private cdr: ChangeDetectorRef,
     private renderer: Renderer2,
+    private contentObserver: ContentObserver,
     private nzUpdateHostClassService: NzUpdateHostClassService,
     private ngZone: NgZone,
     @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig,
@@ -142,7 +150,16 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
   }
 
   ngAfterContentInit(): void {
-    this.checkContent();
+    this.contentObserver
+      .observe(this.contentElement)
+      .pipe(
+        startWith(true),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        // https://github.com/NG-ZORRO/ng-zorro-antd/issues/3079
+        Promise.resolve().then(() => this.checkContent());
+      });
   }
 
   ngOnInit(): void {
@@ -151,6 +168,8 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
   }
 
   ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
     this.nzWave.ngOnDestroy();
   }
 

diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts
@@ -137,14 +137,16 @@ describe('button', () => {
       buttons = fixture.debugElement.queryAll(By.directive(NzButtonComponent));
     });
 
-    it('should have correct style', () => {
+    it('should have correct style', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
       fixture.detectChanges();
       expect(buttons[0].nativeElement.classList.contains('ant-btn-icon-only')).toBe(true);
       expect(buttons[0].nativeElement.classList.contains('ant-btn-circle')).toBe(true);
       expect(buttons[1].nativeElement.classList.contains('ant-btn-icon-only')).toBe(false);
       expect(buttons[1].nativeElement.firstElementChild!.classList.contains('anticon-search')).toBe(true);
       expect(buttons[1].nativeElement.firstElementChild.style.cssText).toBe('display: inline-block;');
-    });
+    }));
   });
 
   describe('loading', () => {
@@ -191,6 +193,8 @@ describe('button', () => {
     it('should loading when click with icon', fakeAsync(() => {
       const button = buttons[3];
       fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
       expect(button.nativeElement.firstElementChild.querySelector('svg')).not.toBe(null);
       expect(button.nativeElement.firstElementChild!.classList.contains('anticon-loading')).toBe(false);
@@ -342,10 +346,33 @@ describe('button', () => {
       expect(button.nativeElement.querySelector('.anticon-poweroff').style.cssText).toBe('display: inline-block;');
     }));
   });
+  describe('with icon', () => {
+    let fixture: ComponentFixture<NzTestButtonWithIconComponent>;
+    let button: DebugElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [NzButtonModule],
+        declarations: [NzTestButtonWithIconComponent],
+        providers: []
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestButtonWithIconComponent);
+      button = fixture.debugElement.query(By.directive(NzButtonComponent));
+    });
+
+    it('should have correct style', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+      expect(button.nativeElement.firstElementChild.tagName).toBe('SPAN');
+    }));
+  });
 });
 
 @Component({
-  selector: 'nz-test-button-search',
   template: `
     <button nz-button nzSearch></button>
   `
@@ -354,7 +381,6 @@ export class NzTestButtonSearchComponent {}
 
 // https://github.com/NG-ZORRO/ng-zorro-antd/issues/2191
 @Component({
-  selector: 'nz-test-button-binding',
   template: `
     <button nz-button nzType="primary" (click)="load()" [nzLoading]="loading">
       <i nz-icon type="poweroff"></i> {{ 'Click me!' }}
@@ -369,3 +395,15 @@ export class NzTestButtonBindingComponent {
     setTimeout(() => (this.loading = false), 5000);
   }
 }
+// https://github.com/NG-ZORRO/ng-zorro-antd/issues/3079
+@Component({
+  template: `
+    <button nz-button>
+      {{ title }}
+      <i nz-icon type="caret-down"></i>
+    </button>
+  `
+})
+export class NzTestButtonWithIconComponent {
+  title = 'button';
+}
diff --git a/components/dropdown/nz-dropdown.spec.ts b/components/dropdown/nz-dropdown.spec.ts
@@ -272,7 +272,7 @@ describe('dropdown', () => {
     });
     it('should click right trigger', () => {
       fixture.detectChanges();
-      const buttonItem = button.nativeElement.querySelector('.ant-btn-icon-only');
+      const buttonItem = button.nativeElement.querySelector('.ant-dropdown-trigger');
       expect(!!buttonItem.attributes.getNamedItem('disabled')).toBe(false);
       const clickCallback = jasmine.createSpy('click callback');
       testComponent.nzDropDownButtonComponent.visible$.subscribe(clickCallback);