fix(module:tooltip): fix setTitle proxy to nzTitle (NG-ZORRO#2698)

close NG-ZORRO#2695
Ricbet · Apr 9, 2020 · ac75b21 · ac75b21
1 parent 4a951a0
commit ac75b21
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 24 deletions.
diff --git a/components/popover/nz-popover.component.html b/components/popover/nz-popover.component.html
@@ -13,12 +13,14 @@
     (@fadeAnimation.done)="_afterVisibilityAnimation($event)">
     <div class="ant-popover-content">
       <div class="ant-popover-arrow"></div>
-      <div class="ant-popover-inner">
-        <div class="ant-popover-title" *ngIf="nzTitle">
-          <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
-        </div>
-        <div class="ant-popover-inner-content">
-          <ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
+      <div class="ant-popover-inner" role="tooltip">
+        <div>
+          <div class="ant-popover-title" *ngIf="nzTitle">
+            <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+          </div>
+          <div class="ant-popover-inner-content">
+            <ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
+          </div>
         </div>
       </div>
     </div>

diff --git a/components/popover/nz-popover.component.ts b/components/popover/nz-popover.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
 import { fadeAnimation } from '../core/animation/fade-animations';
 import { isNotNil } from '../core/util';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
@@ -19,7 +20,8 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 export class NzPopoverComponent extends NzToolTipComponent {
   _prefix = 'ant-popover-placement';
 
-  @Input() @ContentChild('neverUsedTemplate') nzTitle: string | TemplateRef<void>; // used to remove NzToolTipComponent @ContentChild('nzTemplate')
+  /** Used to remove NzToolTipComponent @ContentChild('nzTemplate') */
+  @Input() @ContentChild('neverUsedTemplate') nzTitle: string | TemplateRef<void>;
   @Input() @ContentChild('nzTemplate') nzContent: string | TemplateRef<void>;
 
   constructor(cdr: ChangeDetectorRef) {

diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts
@@ -12,6 +12,7 @@ import {
   ContentChild,
   EventEmitter,
   Input,
+  OnChanges,
   Output,
   TemplateRef,
   ViewChild,
@@ -37,7 +38,7 @@ import { toBoolean } from '../core/util/convert';
     }
   ` ]
 })
-export class NzToolTipComponent {
+export class NzToolTipComponent implements OnChanges {
   _hasBackdrop = false;
   _prefix = 'ant-tooltip-placement';
   _positions: ConnectionPositionPair[] = [ ...DEFAULT_4_POSITIONS ];
@@ -55,8 +56,6 @@ export class NzToolTipComponent {
   @Input() nzMouseEnterDelay = 0.15; // second
   @Input() nzMouseLeaveDelay = 0.1; // second
 
-  @Output() readonly nzVisibleChange = new EventEmitter<boolean>();
-
   @Input()
   set nzVisible(value: boolean) {
     const visible = toBoolean(value);
@@ -66,19 +65,15 @@ export class NzToolTipComponent {
     }
   }
 
-  get nzVisible(): boolean {
-    return this.visibleSource.value;
-  }
+  get nzVisible(): boolean { return this.visibleSource.value; }
 
   @Input()
   set nzTrigger(value: string) {
     this._trigger = value;
     this._hasBackdrop = this._trigger === 'click';
   }
 
-  get nzTrigger(): string {
-    return this._trigger;
-  }
+  get nzTrigger(): string { return this._trigger; }
 
   @Input()
   set nzPlacement(value: string) {
@@ -88,8 +83,16 @@ export class NzToolTipComponent {
     }
   }
 
-  get nzPlacement(): string {
-    return this._placement;
+  get nzPlacement(): string { return this._placement; }
+
+  @Output() readonly nzVisibleChange = new EventEmitter<boolean>();
+
+  constructor(public cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(): void {
+    Promise.resolve().then(() => {
+      this.updatePosition();
+    });
   }
 
   // Manually force updating current overlay's position
@@ -107,8 +110,7 @@ export class NzToolTipComponent {
       }
     }
     this.setClassMap();
-    /** TODO may cause performance problem */
-    this.cdr.detectChanges();
+    this.cdr.detectChanges(); // TODO: performance?
   }
 
   show(): void {
@@ -141,8 +143,6 @@ export class NzToolTipComponent {
     this.overlayOrigin = origin;
   }
 
-  constructor(public cdr: ChangeDetectorRef) {}
-
   protected isContentEmpty(): boolean {
     return this.nzTitle instanceof TemplateRef ? false : (this.nzTitle === '' || !isNotNil(this.nzTitle));
   }

diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts
@@ -24,7 +24,7 @@ import { NzToolTipComponent } from './nz-tooltip.component';
 
 @Directive({
   selector: '[nz-tooltip]',
-  host: {
+  host    : {
     '[class.ant-tooltip-open]': 'isTooltipOpen'
   }
 })
@@ -165,6 +165,11 @@ export class NzTooltipDirective implements AfterViewInit, OnChanges, OnInit, OnD
           this.updateCompValue(key, change.currentValue);
         }
       });
+
+      if (changes.setTitle) {
+        this.nzTitle = changes.setTitle.currentValue;
+        this.updateCompValue('nzTitle', changes.setTitle.currentValue);
+      }
     }
   }
 }
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
@@ -237,14 +237,24 @@ describe('NzTooltip', () => {
       expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
     }));
 
+    it('should set `setTitle` proxy to `nzTitle`', () => {
+      fixture.detectChanges();
+      const tooltipComponent = (component.titleStringNzTooltipDirective as any).tooltip as NzToolTipComponent; // tslint:disable-line:no-any
+      expect(tooltipComponent.nzTitle).toBe('title-string');
+
+      component.title = 'changed!';
+      fixture.detectChanges();
+      expect(tooltipComponent.nzTitle).toBe('changed!');
+    });
+
   });
 
 });
 
 @Component({
   selector: 'nz-tooltip-test-new',
   template: `
-    <a #titleString nz-tooltip nzTitle="title-string" nzTrigger="hover" nzPlacement="topLeft" nzOverlayClassName="testClass" [nzOverlayStyle]="{color:'#000'}"
+    <a #titleString nz-tooltip [nzTitle]="title" nzTrigger="hover" nzPlacement="topLeft" nzOverlayClassName="testClass" [nzOverlayStyle]="{color:'#000'}"
        [nzMouseEnterDelay]="0.15" [nzMouseLeaveDelay]="0.1">Show</a>
     <a #titleTemplate nz-tooltip [nzTitle]="template">Show</a>
     <ng-template #template>
@@ -264,6 +274,8 @@ export class NzTooltipTestNewComponent {
   @ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective;
   @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
 
+  title = 'title-string';
+
 }
 
 @Component({