fix(module:layout): fix layout init breakpoint nzCollapsed value (NG-…

…ZORRO#2350) close NG-ZORRO#2343
hsuanxyz · Oct 24, 2018 · 0ccdfb6 · 0ccdfb6
1 parent 8f8eadd
commit 0ccdfb6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/components/layout/demo/responsive.ts b/components/layout/demo/responsive.ts
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-layout-responsive',
   template: `
     <nz-layout>
-      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzCollapsedWidth]="0" [nzBreakpoint]="'lg'">
+      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzBreakpoint]="'lg'">
         <div class="logo">
         </div>
-        <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
+        <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
           <li nz-menu-item><span><i nz-icon type="user"></i><span class="nav-text">nav 1</span></span></li>
           <li nz-menu-item><span><i nz-icon type="video-camera"></i><span class="nav-text">nav 2</span></span>
           </li>

diff --git a/components/layout/nz-layout.spec.ts b/components/layout/nz-layout.spec.ts
@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { async, fakeAsync, tick , TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NzMatchMediaService } from '../core/services/nz-match-media.service';
@@ -202,11 +202,11 @@ describe('layout', () => {
       testComponent = fixture.debugElement.componentInstance;
       sider = fixture.debugElement.query(By.directive(NzSiderComponent));
     });
-    it('should responsive work', () => {
+    it('should responsive work', fakeAsync(() => {
       fixture.detectChanges();
-      window.dispatchEvent(new Event('resize'));
+      tick();
       fixture.detectChanges();
-      expect(sider.nativeElement.style.cssText === 'flex: 0 0 0px; max-width: 0px; min-width: 0px; width: 0px;').toBe(true);
-    });
+      expect(sider.nativeElement.style.cssText === 'flex: 0 0 80px; max-width: 80px; min-width: 80px; width: 80px;').toBe(true);
+    }));
   });
 });
diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts
@@ -144,14 +144,14 @@ export class NzSiderComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.watchMatchMedia();
     if (this.nzLayoutComponent) {
       this.nzLayoutComponent.hasSider = true;
     }
   }
 
   ngAfterViewInit(): void {
     this.isInit = true;
+    Promise.resolve().then(() => this.watchMatchMedia());
   }
 
 }