fix(module:all): move hostbinding to constructor to fix angular trans…

…ition bug (NG-ZORRO#2895)
wzhudev · Feb 15, 2019 · e39f6bf · e39f6bf
1 parent ea7e8e9
commit e39f6bf
Show file tree

Hide file tree

Showing 55 changed files with 359 additions and 256 deletions.
diff --git a/components/anchor/nz-anchor-link.component.ts b/components/anchor/nz-anchor-link.component.ts
@@ -7,7 +7,7 @@ import {
   HostBinding,
   Input,
   OnDestroy,
-  OnInit,
+  OnInit, Renderer2,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
@@ -19,7 +19,7 @@ import { NzAnchorComponent } from './nz-anchor.component';
   preserveWhitespaces: false,
   templateUrl        : './nz-anchor-link.component.html',
   host               : {
-    '[class.ant-anchor-link]': 'true'
+    '[class.ant-anchor-link-active]': 'active'
   },
   styles             : [ `
     nz-link {
@@ -35,6 +35,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
   titleStr = '';
   titleTpl: TemplateRef<void>;
+  active: boolean = false;
 
   @Input()
   set nzTitle(value: string | TemplateRef<void>) {
@@ -48,9 +49,8 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<void>;
 
-  @HostBinding('class.ant-anchor-link-active') active: boolean = false;
-
-  constructor(public el: ElementRef, private anchorComp: NzAnchorComponent, private cdr: ChangeDetectorRef) {
+  constructor(public elementRef: ElementRef, private anchorComp: NzAnchorComponent, private cdr: ChangeDetectorRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-anchor-link');
   }
 
   ngOnInit(): void {

diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
@@ -203,7 +203,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
     comp.active = true;
     comp.markForCheck();
 
-    const linkNode = (comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
+    const linkNode = (comp.elementRef.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
     this.ink.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
     this.cdr.detectChanges();
 

diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts
@@ -23,7 +23,6 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' |
   animations         : [ zoomBadgeMotion ],
   templateUrl        : './nz-badge.component.html',
   host               : {
-    '[class.ant-badge]'       : 'true',
     '[class.ant-badge-status]': 'nzStatus'
   }
 })
@@ -59,6 +58,7 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   constructor(private renderer: Renderer2, private elementRef: ElementRef) {
+    renderer.addClass(elementRef.nativeElement, 'ant-badge');
   }
 
   ngOnInit(): void {

diff --git a/components/breadcrumb/nz-breadcrumb.component.ts b/components/breadcrumb/nz-breadcrumb.component.ts
@@ -1,12 +1,12 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
+  Component, ElementRef,
   Injector,
   Input,
   NgZone,
   OnDestroy,
-  OnInit,
+  OnInit, Renderer2,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
@@ -28,9 +28,6 @@ export interface BreadcrumbOption {
   selector           : 'nz-breadcrumb',
   preserveWhitespaces: false,
   templateUrl        : './nz-breadcrumb.component.html',
-  host               : {
-    '[class.ant-breadcrumb]': 'true'
-  },
   styles             : [ `
     nz-breadcrumb {
       display: block;
@@ -45,7 +42,9 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(private injector: Injector, private ngZone: NgZone, private cd: ChangeDetectorRef) {}
+  constructor(private injector: Injector, private ngZone: NgZone, private cd: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-breadcrumb');
+  }
 
   ngOnInit(): void {
     if (this.nzAutoGenerate) {

diff --git a/components/card/nz-card-grid.directive.ts b/components/card/nz-card-grid.directive.ts
@@ -1,10 +1,10 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[nz-card-grid]',
-  host    : {
-    '[class.ant-card-grid]': 'true'
-  }
+  selector: '[nz-card-grid]'
 })
 export class NzCardGridDirective {
+  constructor(elementRef: ElementRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-card-grid');
+  }
 }
diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts
@@ -1,20 +1,19 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-card-loading',
   templateUrl        : './nz-card-loading.component.html',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
   encapsulation      : ViewEncapsulation.None,
-  host               : {
-    '[class.ant-card-loading-content]': 'true'
-  },
   styles             : [ `
     nz-card-loading {
       display: block;
     }
   ` ]
 })
 export class NzCardLoadingComponent {
-
+  constructor(elementRef: ElementRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-card-loading-content');
+  }
 }
diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
 
 @Component({
   selector           : 'nz-card-meta',
@@ -10,13 +18,14 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
     nz-card-meta {
       display: block;
     }
-  ` ],
-  host               : {
-    '[class.ant-card-meta]': 'true'
-  }
+  ` ]
 })
 export class NzCardMetaComponent {
   @Input() nzTitle: string | TemplateRef<void>;
   @Input() nzDescription: string | TemplateRef<void>;
   @Input() nzAvatar: TemplateRef<void>;
+
+  constructor(elementRef: ElementRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-card-meta');
+  }
 }
diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts
@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
-  Input,
+  ContentChild, ElementRef,
+  Input, Renderer2,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
@@ -21,7 +21,6 @@ import { NzCardTabComponent } from './nz-card-tab.component';
     }
   ` ],
   host               : {
-    '[class.ant-card]'             : 'true',
     '[class.ant-card-loading]'     : 'nzLoading',
     '[class.ant-card-bordered]'    : 'nzBordered',
     '[class.ant-card-hoverable]'   : 'nzHoverable',
@@ -40,4 +39,8 @@ export class NzCardComponent {
   @Input() nzTitle: string | TemplateRef<void>;
   @Input() nzExtra: string | TemplateRef<void>;
   @ContentChild(NzCardTabComponent) tab: NzCardTabComponent;
+
+  constructor(renderer: Renderer2, elementRef: ElementRef) {
+    renderer.addClass(elementRef.nativeElement, 'ant-card');
+  }
 }
diff --git a/components/carousel/nz-carousel-content.directive.ts b/components/carousel/nz-carousel-content.directive.ts
@@ -8,10 +8,7 @@ import {
 import { isNotNil } from '../core/util/check';
 
 @Directive({
-  selector: '[nz-carousel-content]',
-  host    : {
-    '[class.slick-slide]': 'true'
-  }
+  selector: '[nz-carousel-content]'
 })
 export class NzCarouselContentDirective implements OnInit {
   private _active = false;
@@ -85,6 +82,7 @@ export class NzCarouselContentDirective implements OnInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'slick-slide');
   }
 
   ngOnInit(): void {

diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -36,7 +36,6 @@ export type SwipeDirection = 'swipeleft' | 'swiperight';
   preserveWhitespaces: false,
   templateUrl        : './nz-carousel.component.html',
   host               : {
-    '[class.ant-carousel]'         : 'true',
     '[class.ant-carousel-vertical]': 'nzVertical'
   },
   styles             : [
@@ -97,6 +96,7 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
   }
 
   constructor(public elementRef: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private ngZone: NgZone) {
+    renderer.addClass(elementRef.nativeElement, 'ant-carousel');
   }
 
   ngAfterContentInit(): void {

diff --git a/components/cascader/nz-cascader-li.component.ts b/components/cascader/nz-cascader-li.component.ts
@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, SecurityContext, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input, Renderer2,
+  SecurityContext,
+  ViewEncapsulation
+} from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CascaderOption } from './types';
 
@@ -9,7 +16,6 @@ import { CascaderOption } from './types';
   templateUrl    : './nz-cascader-li.component.html',
   host           : {
     '[attr.title]'                           : 'option.title || getOptionLabel()',
-    '[class.ant-cascader-menu-item]'         : 'true',
     '[class.ant-cascader-menu-item-active]'  : 'activated',
     '[class.ant-cascader-menu-item-expand]'  : '!option.isLeaf',
     '[class.ant-cascader-menu-item-disabled]': 'option.disabled'
@@ -21,7 +27,9 @@ export class NzCascaderOptionComponent {
   @Input() highlightText: string;
   @Input() nzLabelProperty = 'label';
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(private sanitizer: DomSanitizer, elementRef: ElementRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item');
+  }
 
   getOptionLabel(): string {
     return this.option ? this.option[ this.nzLabelProperty ] : '';

diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -11,6 +11,7 @@ import {
   Input,
   OnDestroy,
   Output,
+  Renderer2,
   TemplateRef,
   ViewChild,
   ViewEncapsulation
@@ -50,8 +51,6 @@ const defaultDisplayRender = label => label.join(' / ');
   ],
   host               : {
     '[attr.tabIndex]'                       : '"0"',
-    '[class.ant-cascader]'                  : 'true',
-    '[class.ant-cascader-picker]'           : 'true',
     '[class.ant-cascader-lg]'               : 'nzSize === "large"',
     '[class.ant-cascader-sm]'               : 'nzSize === "small"',
     '[class.ant-cascader-picker-disabled]'  : 'nzDisabled',
@@ -812,7 +811,9 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     this.setMenuVisible(false);
   }
 
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-cascader');
+    renderer.addClass(elementRef.nativeElement, 'ant-cascader-picker');
   }
 
   ngOnDestroy(): void {

diff --git a/components/checkbox/nz-checkbox-group.component.ts b/components/checkbox/nz-checkbox-group.component.ts
@@ -6,6 +6,7 @@ import {
   ElementRef,
   Input,
   OnInit,
+  Renderer2,
   ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -29,10 +30,7 @@ export interface NzCheckBoxOptionInterface {
       useExisting: forwardRef(() => NzCheckboxGroupComponent),
       multi      : true
     }
-  ],
-  host               : {
-    '[class.ant-checkbox-group]': 'true'
-  }
+  ]
 })
 export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
   // tslint:disable-next-line:no-any
@@ -50,7 +48,8 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
     return option.value;
   }
 
-  constructor(private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef) {
+  constructor(private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, renderer: Renderer2) {
+    renderer.addClass(elementRef.nativeElement, 'ant-checkbox-group');
   }
 
   ngOnInit(): void {

diff --git a/components/checkbox/nz-checkbox-wrapper.component.ts b/components/checkbox/nz-checkbox-wrapper.component.ts
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Output,
+  Renderer2,
+  ViewEncapsulation
+} from '@angular/core';
 
 import { NzCheckboxComponent } from './nz-checkbox.component';
 
@@ -7,10 +15,7 @@ import { NzCheckboxComponent } from './nz-checkbox.component';
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
   encapsulation      : ViewEncapsulation.None,
-  templateUrl        : './nz-checkbox-wrapper.component.html',
-  host               : {
-    '[class.ant-checkbox-group]': 'true'
-  }
+  templateUrl        : './nz-checkbox-wrapper.component.html'
 })
 export class NzCheckboxWrapperComponent {
   @Output() readonly nzOnChange = new EventEmitter<string[]>();
@@ -32,4 +37,8 @@ export class NzCheckboxWrapperComponent {
   onChange(): void {
     this.nzOnChange.emit(this.outputValue());
   }
+
+  constructor(renderer: Renderer2, elementRef: ElementRef) {
+    renderer.addClass(elementRef.nativeElement, 'ant-checkbox-group');
+  }
 }
diff --git a/components/checkbox/nz-checkbox.component.ts b/components/checkbox/nz-checkbox.component.ts
@@ -37,7 +37,6 @@ import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
     }
   ],
   host               : {
-    '[class.ant-checkbox-wrapper]': 'true',
     '(click)'                     : 'hostClick($event)'
   }
 })
@@ -111,6 +110,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
   }
 
   constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2, @Optional() private nzCheckboxWrapperComponent: NzCheckboxWrapperComponent, private cdr: ChangeDetectorRef, private focusMonitor: FocusMonitor) {
+    renderer.addClass(elementRef.nativeElement, 'ant-checkbox-wrapper');
   }
 
   ngOnInit(): void {