refactor(module:layout): refactor layout (NG-ZORRO#2500)

components/layout/nz-content.component.ts

@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-content',
   preserveWhitespaces: false,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-content.component.html',
   styles             : [
-    `:host {
+      `nz-content {
       display: block;
     }`
   ],

components/layout/nz-footer.component.ts

@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-footer',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   templateUrl        : './nz-footer.component.html',
   styles             : [
-    `:host {
+      `nz-footer {
       display: block;
     }`
   ],

components/layout/nz-header.component.ts

@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-header',
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   preserveWhitespaces: false,
   templateUrl        : './nz-header.component.html',
   styles             : [
-    `:host {
+      `nz-header {
       display: block;
     }`
   ],

components/layout/nz-layout.component.ts

@@ -1,14 +1,25 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-layout',
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
   templateUrl        : './nz-layout.component.html',
   host               : {
-    '[class.ant-layout]'          : 'true',
-    '[class.ant-layout-has-sider]': 'hasSider'
+    '[class.ant-layout]': 'true'
   }
 })
 export class NzLayoutComponent {
-  hasSider = false;
+
+  destroySider(): void {
+    this.renderer.removeClass(this.elementRef.nativeElement, 'ant-layout-has-sider');
+  }
+
+  initSider(): void {
+    this.renderer.addClass(this.elementRef.nativeElement, 'ant-layout-has-sider');
+  }
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+  }
 }

components/layout/nz-layout.module.ts

@@ -1,7 +1,7 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-
-import { NzMatchMediaService } from '../core/services/nz-match-media.service';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzContentComponent } from './nz-content.component';
@@ -13,8 +13,7 @@ import { NzSiderComponent } from './nz-sider.component';
 @NgModule({
   declarations: [ NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent ],
   exports     : [ NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent ],
-  providers   : [ NzMatchMediaService ],
-  imports     : [ CommonModule, NzIconModule ]
+  imports     : [ CommonModule, NzIconModule, LayoutModule, PlatformModule ]
 })
 export class NzLayoutModule {
 }

components/layout/nz-layout.spec.ts

@@ -1,8 +1,7 @@
+import { MediaMatcher } from '@angular/cdk/layout';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, fakeAsync, tick , TestBed } from '@angular/core/testing';
+import { async, discardPeriodicTasks, fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-
-import { NzMatchMediaService } from '../core/services/nz-match-media.service';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzDemoLayoutBasicComponent } from './demo/basic';
@@ -191,7 +190,7 @@ describe('layout', () => {
       }).overrideComponent(NzSiderComponent, {
         set: {
           providers: [
-            { provide: NzMatchMediaService, useClass: MatchMediaServiceSpy }
+            { provide: MediaMatcher, useClass: MatchMediaServiceSpy }
           ]
         }
       }).compileComponents();
@@ -204,7 +203,9 @@ describe('layout', () => {
     });
     it('should responsive work', fakeAsync(() => {
       fixture.detectChanges();
-      tick();
+      tick(1000);
+      fixture.detectChanges();
+      discardPeriodicTasks();
       fixture.detectChanges();
       expect(sider.nativeElement.style.cssText === 'flex: 0 0 80px; max-width: 80px; min-width: 80px; width: 80px;').toBe(true);
     }));

components/layout/nz-sider.component.html

@@ -1,10 +1,15 @@
 <div class="ant-layout-sider-children">
   <ng-content></ng-content>
 </div>
-<span class="ant-layout-sider-zero-width-trigger" *ngIf="isZeroTrigger" (click)="toggleCollapse()">
+<span class="ant-layout-sider-zero-width-trigger"
+  *ngIf="isZeroTrigger"
+  (click)="toggleCollapse()">
   <i nz-icon type="bars"></i>
 </span>
-<div class="ant-layout-sider-trigger" *ngIf="isSiderTrigger" (click)="toggleCollapse()" [style.width.px]="nzCollapsed?nzCollapsedWidth:nzWidth">
+<div class="ant-layout-sider-trigger"
+  *ngIf="isSiderTrigger"
+  (click)="toggleCollapse()"
+  [style.width.px]="nzCollapsed?nzCollapsedWidth:nzWidth">
   <ng-template [ngTemplateOutlet]="nzTrigger"></ng-template>
 </div>
 <ng-template #defaultTrigger>

components/layout/nz-sider.component.ts

@@ -1,40 +1,48 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Host,
   HostBinding,
-  HostListener,
   Input,
+  NgZone,
+  OnDestroy,
   OnInit,
   Optional,
   Output,
   TemplateRef,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
-import { NzMatchMediaService } from '../core/services/nz-match-media.service';
-import { toBoolean } from '../core/util/convert';
-
+import { MediaMatcher } from '@angular/cdk/layout';
+import { Platform } from '@angular/cdk/platform';
+import { fromEvent, Subject } from 'rxjs';
+import { auditTime, startWith, takeUntil } from 'rxjs/operators';
+import { InputBoolean } from '../core/util/convert';
 import { NzLayoutComponent } from './nz-layout.component';
 
 export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 @Component({
   selector           : 'nz-sider',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   templateUrl        : './nz-sider.component.html',
   host               : {
-    '[class.ant-layout-sider]': 'true'
+    '[class.ant-layout-sider]'           : 'true',
+    '[class.ant-layout-sider-zero-width]': 'nzCollapsed && (nzCollapsedWidth===0)',
+    '[style.flex]'                       : 'flexSetting',
+    '[style.max-width.px]'               : 'widthSetting',
+    '[style.min-width.px]'               : 'widthSetting',
+    '[style.width.px]'                   : 'widthSetting'
   }
 })
-export class NzSiderComponent implements OnInit, AfterViewInit {
-  private _collapsed = false;
-  private _collapsible = false;
-  @ViewChild('defaultTrigger') _trigger: TemplateRef<void>;
-  private _reverseArrow = false;
+export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
   private below = false;
-  private isInit = false;
+  private destroy$ = new Subject();
   private dimensionMap = {
     xs : '480px',
     sm : '576px',
@@ -46,84 +54,34 @@ export class NzSiderComponent implements OnInit, AfterViewInit {
   @Input() nzWidth = 200;
   @Input() nzCollapsedWidth = 80;
   @Input() nzBreakpoint: NzBreakPoint;
-
-  @Input()
-  set nzReverseArrow(value: boolean) {
-    this._reverseArrow = toBoolean(value);
-  }
-
-  get nzReverseArrow(): boolean {
-    return this._reverseArrow;
-  }
-
-  @Input()
-  set nzTrigger(value: TemplateRef<void>) {
-    this._trigger = value;
-  }
-
-  get nzTrigger(): TemplateRef<void> {
-    return this._trigger;
-  }
-
-  @Input()
-  set nzCollapsible(value: boolean) {
-    this._collapsible = toBoolean(value);
-  }
-
-  get nzCollapsible(): boolean {
-    return this._collapsible;
-  }
-
-  @Input()
-  @HostBinding('class.ant-layout-sider-collapsed')
-  set nzCollapsed(value: boolean) {
-    this._collapsed = toBoolean(value);
-  }
-
-  get nzCollapsed(): boolean {
-    return this._collapsed;
-  }
-
+  @Input() @InputBoolean() nzReverseArrow = false;
+  @Input() @InputBoolean() nzCollapsible = false;
+  @Input() @ViewChild('defaultTrigger') nzTrigger: TemplateRef<void>;
+  @Input() @InputBoolean() @HostBinding('class.ant-layout-sider-collapsed') nzCollapsed = false;
   @Output() readonly nzCollapsedChange = new EventEmitter();
 
-  @HostBinding('class.ant-layout-sider-zero-width')
-  get setZeroClass(): boolean {
-    return this.nzCollapsed && (this.nzCollapsedWidth === 0);
-  }
-
-  @HostBinding('style.flex')
-  get setFlex(): string {
+  get flexSetting(): string {
     if (this.nzCollapsed) {
       return `0 0 ${this.nzCollapsedWidth}px`;
     } else {
       return `0 0 ${this.nzWidth}px`;
     }
   }
 
-  @HostBinding('style.max-width.px')
-  @HostBinding('style.min-width.px')
-  @HostBinding('style.width.px')
-  get setWidth(): number {
+  get widthSetting(): number {
     if (this.nzCollapsed) {
       return this.nzCollapsedWidth;
     } else {
       return this.nzWidth;
     }
   }
 
-  @HostListener('window:resize', [ '$event' ])
-  onWindowResize(e: UIEvent): void {
-    this.watchMatchMedia();
-  }
-
   watchMatchMedia(): void {
     if (this.nzBreakpoint) {
-      const matchBelow = this.nzMatchMediaService.matchMedia(`(max-width: ${this.dimensionMap[ this.nzBreakpoint ]})`).matches;
+      const matchBelow = this.mediaMatcher.matchMedia(`(max-width: ${this.dimensionMap[ this.nzBreakpoint ]})`).matches;
       this.below = matchBelow;
       this.nzCollapsed = matchBelow;
-      if (this.isInit) {
-        this.nzCollapsedChange.emit(matchBelow);
-      }
+      this.nzCollapsedChange.emit(matchBelow);
     }
   }
 
@@ -140,18 +98,31 @@ export class NzSiderComponent implements OnInit, AfterViewInit {
     return this.nzCollapsible && this.nzTrigger && (this.nzCollapsedWidth !== 0);
   }
 
-  constructor(@Optional() @Host() private nzLayoutComponent: NzLayoutComponent, private nzMatchMediaService: NzMatchMediaService) {
+  constructor(@Optional() @Host() private nzLayoutComponent: NzLayoutComponent, private mediaMatcher: MediaMatcher, private ngZone: NgZone, private platform: Platform) {
   }
 
   ngOnInit(): void {
     if (this.nzLayoutComponent) {
-      this.nzLayoutComponent.hasSider = true;
+      this.nzLayoutComponent.initSider();
     }
   }
 
   ngAfterViewInit(): void {
-    this.isInit = true;
-    Promise.resolve().then(() => this.watchMatchMedia());
+    if (this.platform.isBrowser) {
+      this.ngZone.runOutsideAngular(() => {
+        fromEvent(window, 'resize')
+        .pipe(startWith(null), auditTime(16), takeUntil(this.destroy$))
+        .subscribe(() => this.watchMatchMedia());
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    if (this.nzLayoutComponent) {
+      this.nzLayoutComponent.destroySider();
+    }
   }
 
 }