refactor(module:tag): refactor tag support OnPush (#2606)

NG-ZORRO · Dec 11, 2018 · 40efae1 · 40efae1
1 parent dfba49f
commit 40efae1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 66 deletions.
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-基本标签的用法，可以通过添加 `nzMode="closable"` 变为可关闭标签。可关闭标签具有 `nzOnClose` `nzAfterClose` 两个事件。
+基本标签的用法，可以通过添加 `nzMode="closeable"` 变为可关闭标签。可关闭标签具有 `nzOnClose` `nzAfterClose` 两个事件。
 
 ## en-US
 
-Usage of basic Tag, and it could be closable by set `nzMode="closable"` property. Closable Tag supports `nzOnClose` `nzAfterClose` events.
+Usage of basic Tag, and it could be closeable by set `nzMode="closeable"` property. Closeable Tag supports `nzOnClose` `nzAfterClose` events.
diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts
@@ -8,18 +8,22 @@ import {
 } from '@angular/animations';
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
   OnInit,
   Output,
   Renderer2,
-  ViewChild
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
 export type TagType = 'default' | 'closeable' | 'checkable';
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector           : 'nz-tag',
@@ -36,53 +40,26 @@ import { toBoolean } from '../core/util/convert';
       animate('300ms cubic-bezier(0.78, 0.14, 0.15, 0.86)')
     ])
   ]) ],
-  templateUrl        : './nz-tag.component.html'
+  templateUrl        : './nz-tag.component.html',
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None
 })
-export class NzTagComponent implements OnInit, AfterViewInit {
-  private _color: string;
-  private _checked = false;
-  private isPreset: boolean;
-  private _mode: TagType = 'default';
+export class NzTagComponent implements OnInit, OnChanges, AfterViewInit {
   classMap;
   closed = false;
-  @ViewChild('wrapperElement') wrapperElement: ElementRef;
+
+  @ViewChild('wrapperElement') private wrapperElement: ElementRef;
+
+  @Input() nzMode: TagType = 'default';
+  @Input() nzColor: string;
+  @Input() @InputBoolean() nzChecked: boolean = false;
   @Output() readonly nzAfterClose = new EventEmitter<void>();
   @Output() readonly nzOnClose = new EventEmitter<MouseEvent>();
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
 
-  @Input()
-  set nzMode(value: TagType) {
-    this._mode = value;
-    this.updateClassMap();
-  }
-
-  get nzMode(): TagType {
-    return this._mode;
-  }
-
-  @Input()
-  set nzColor(value: string) {
-    this._color = value;
-    this.isPreset = this.isPresetColor(value);
-    this.updateClassMap();
-    this.updateColorStatus();
-  }
-
-  get nzColor(): string {
-    return this._color;
-  }
-
-  @Input()
-  set nzChecked(value: boolean) {
-    this._checked = toBoolean(value);
-    this.updateClassMap();
-  }
-
-  get nzChecked(): boolean {
-    return this._checked;
-  }
+  constructor(private renderer: Renderer2) { }
 
-  isPresetColor(color?: string): boolean {
+  private isPresetColor(color?: string): boolean {
     if (!color) {
       return false;
     }
@@ -92,10 +69,32 @@ export class NzTagComponent implements OnInit, AfterViewInit {
     );
   }
 
+  private updateClassMap(): void {
+    const isPresetColor = this.isPresetColor(this.nzColor);
+    this.classMap = {
+      [ `ant-tag` ]                  : true,
+      [ `ant-tag-has-color` ]        : this.nzColor && !isPresetColor,
+      [ `ant-tag-${this.nzColor}` ]  : isPresetColor,
+      [ `ant-tag-checkable` ]        : this.nzMode === 'checkable',
+      [ `ant-tag-checkable-checked` ]: this.nzChecked
+    };
+  }
+
+  private updateColorStatus(): void {
+    if (this.wrapperElement && this.nzColor) {
+      if (this.isPresetColor(this.nzColor)) {
+        this.renderer.removeStyle(this.wrapperElement.nativeElement, 'background-color');
+      } else {
+        this.renderer.setStyle(this.wrapperElement.nativeElement, 'background-color', this.nzColor);
+      }
+    }
+  }
+
   updateCheckedStatus(): void {
     if (this.nzMode === 'checkable') {
       this.nzChecked = !this.nzChecked;
       this.nzCheckedChange.emit(this.nzChecked);
+      this.updateClassMap();
     }
   }
 
@@ -112,32 +111,14 @@ export class NzTagComponent implements OnInit, AfterViewInit {
     }
   }
 
-  updateClassMap(): void {
-    const isPresetColor = this.isPresetColor(this.nzColor);
-    this.classMap = {
-      [ `ant-tag` ]                  : true,
-      [ `ant-tag-has-color` ]        : this.nzColor && !isPresetColor,
-      [ `ant-tag-${this.nzColor}` ]  : isPresetColor,
-      [ `ant-tag-checkable` ]        : this.nzMode === 'checkable',
-      [ `ant-tag-checkable-checked` ]: this.nzChecked
-    };
+  ngOnInit(): void {
+    this.updateClassMap();
   }
 
-  updateColorStatus(): void {
-    if (this.wrapperElement && this.nzColor) {
-      if (this.isPreset) {
-        this.renderer.removeStyle(this.wrapperElement.nativeElement, 'background-color');
-      } else {
-        this.renderer.setStyle(this.wrapperElement.nativeElement, 'background-color', this.nzColor);
-      }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzColor) {
+      this.updateColorStatus();
     }
-  }
-
-  constructor(private renderer: Renderer2) {
-
-  }
-
-  ngOnInit(): void {
     this.updateClassMap();
   }