fix(module:spin): support dynamic ng-content in spin (#925)

NG-ZORRO · Jan 18, 2018 · cc7a83b · cc7a83b
1 parent 6481a88
commit cc7a83b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts
@@ -17,7 +17,6 @@ import { NzListGrid, ListSize } from './interface';
       <ng-container *ngIf="_header; else _headerTpl">{{ _header }}</ng-container>
     </div>
     <nz-spin [nzSpinning]="nzLoading">
-      nz-spin: bug
       <div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
         <div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
             *ngFor="let item of nzDataSource; let index = index">

diff --git a/components/spin/nz-spin.component.ts b/components/spin/nz-spin.component.ts
@@ -28,7 +28,7 @@ import { toBoolean } from '../core/util/convert';
           <div class="ant-spin-text" *ngIf="nzTip">{{ nzTip }}</div>
         </div>
       </div>
-      <div class="ant-spin-container" [class.ant-spin-blur]="spinning$|async" #ref [hidden]="!_nested">
+      <div class="ant-spin-container" [class.ant-spin-blur]="spinning$|async" #ref [hidden]="!_nested" (cdkObserveContent)="checkNested()">
         <ng-content></ng-content>
       </div>
     </div>
@@ -91,20 +91,24 @@ export class NzSpinComponent implements AfterViewInit {
     return true;
   }
 
+  checkNested(): void {
+    /** no way to detect empty https://github.com/angular/angular/issues/12530 **/
+    if (!this.isEmpty(this._ref.nativeElement)) {
+      this._nested = true;
+      this._renderer.setStyle(this._el, 'display', 'block');
+    } else {
+      this._nested = false;
+      this._renderer.removeStyle(this._el, 'display');
+    }
+  }
+
   constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private zone: NgZone) {
     this._el = this._elementRef.nativeElement;
   }
 
   ngAfterViewInit(): void {
     this.zone.onStable.pipe(first()).subscribe(() => {
-      /** no way to detect empty https://github.com/angular/angular/issues/12530 **/
-      if (!this.isEmpty(this._ref.nativeElement)) {
-        this._nested = true;
-        this._renderer.setStyle(this._el, 'display', 'block');
-      } else {
-        this._renderer.removeChild(this._ref.nativeElement.parentNode, this._ref.nativeElement);
-      }
+      this.checkNested();
     });
-
   }
 }
diff --git a/components/spin/nz-spin.module.ts b/components/spin/nz-spin.module.ts
@@ -1,11 +1,12 @@
+import { ObserversModule } from '@angular/cdk/observers';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NzSpinComponent } from './nz-spin.component';
 
 @NgModule({
   exports     : [ NzSpinComponent ],
   declarations: [ NzSpinComponent ],
-  imports     : [ CommonModule ]
+  imports     : [ CommonModule, ObserversModule ]
 })
 export class NzSpinModule {
 }