fix(module:tooltip,popover,popconfirm): fix hydration error (#8512)

NG-ZORRO · Apr 29, 2024 · 5009ec0 · 5009ec0
1 parent ee46760
commit 5009ec0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 66 deletions.
diff --git a/components/popconfirm/popconfirm.ts b/components/popconfirm/popconfirm.ts
@@ -11,7 +11,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentRef,
   Directive,
   ElementRef,
   EventEmitter,
@@ -22,18 +21,16 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   TemplateRef,
   ViewChildren,
-  ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { finalize, first, takeUntil } from 'rxjs/operators';
 
 import { NzButtonModule, NzButtonType } from 'ng-zorro-antd/button';
 import { zoomBigMotion } from 'ng-zorro-antd/core/animation';
-import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
@@ -89,9 +86,6 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
   @Output() readonly nzOnCancel = new EventEmitter<void>();
   @Output() readonly nzOnConfirm = new EventEmitter<void>();
 
-  protected override readonly componentRef: ComponentRef<NzPopconfirmComponent> =
-    this.hostView.createComponent(NzPopconfirmComponent);
-
   protected override getProxyPropertyMap(): PropertyMapping {
     return {
       nzOkText: ['nzOkText', () => this.nzOkText],
@@ -108,14 +102,8 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
     };
   }
 
-  constructor(
-    elementRef: ElementRef,
-    hostView: ViewContainerRef,
-    renderer: Renderer2,
-    @Host() @Optional() noAnimation?: NzNoAnimationDirective,
-    nzConfigService?: NzConfigService
-  ) {
-    super(elementRef, hostView, renderer, noAnimation, nzConfigService);
+  constructor() {
+    super(NzPopconfirmComponent);
   }
 
   /**

diff --git a/components/popover/popover.ts b/components/popover/popover.ts
@@ -10,32 +10,29 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentRef,
   Directive,
   ElementRef,
   EventEmitter,
   Host,
   Input,
   Optional,
   Output,
-  Renderer2,
-  ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
 
 import { zoomBigMotion } from 'ng-zorro-antd/core/animation';
-import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
 import { BooleanInput, NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import {
-  isTooltipEmpty,
-  NzTooltipBaseDirective,
   NzToolTipComponent,
+  NzTooltipBaseDirective,
   NzTooltipTrigger,
-  PropertyMapping
+  PropertyMapping,
+  isTooltipEmpty
 } from 'ng-zorro-antd/tooltip';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'popover';
@@ -71,23 +68,15 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('nzPopoverVisibleChange') override readonly visibleChange = new EventEmitter<boolean>();
 
-  override componentRef: ComponentRef<NzPopoverComponent> = this.hostView.createComponent(NzPopoverComponent);
-
   protected override getProxyPropertyMap(): PropertyMapping {
     return {
       nzPopoverBackdrop: ['nzBackdrop', () => this.nzPopoverBackdrop],
       ...super.getProxyPropertyMap()
     };
   }
 
-  constructor(
-    elementRef: ElementRef,
-    hostView: ViewContainerRef,
-    renderer: Renderer2,
-    @Host() @Optional() noAnimation?: NzNoAnimationDirective,
-    nzConfigService?: NzConfigService
-  ) {
-    super(elementRef, hostView, renderer, noAnimation, nzConfigService);
+  constructor() {
+    super(NzPopoverComponent);
   }
 }
 

diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts
@@ -5,22 +5,25 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectorRef,
-  ComponentRef,
   Directive,
   ElementRef,
   EventEmitter,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
+  PLATFORM_ID,
   Renderer2,
   SimpleChanges,
   TemplateRef,
+  Type,
   ViewChild,
-  ViewContainerRef
+  ViewContainerRef,
+  inject
 } from '@angular/core';
 import { Subject, asapScheduler } from 'rxjs';
 import { delay, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
@@ -38,7 +41,7 @@ export interface PropertyMapping {
 export type NzTooltipTrigger = 'click' | 'focus' | 'hover' | null;
 
 @Directive()
-export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, AfterViewInit {
+export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges, OnDestroy {
   arrowPointAtCenter?: boolean;
   config?: Required<PopoverConfig | PopConfirmConfig>;
   directiveTitle?: NzTSType | null;
@@ -56,11 +59,6 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
   cdkConnectedOverlayPush?: boolean;
   visibleChange = new EventEmitter<boolean>();
 
-  /**
-   * For create tooltip dynamically. This should be override for each different component.
-   */
-  protected componentRef!: ComponentRef<NzTooltipBaseComponent>;
-
   /**
    * This true title that would be used in other parts on this component.
    */
@@ -116,13 +114,21 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
 
   private delayTimer?: ReturnType<typeof setTimeout>;
 
-  constructor(
-    public elementRef: ElementRef,
-    protected hostView: ViewContainerRef,
-    protected renderer: Renderer2,
-    protected noAnimation?: NzNoAnimationDirective,
-    protected nzConfigService?: NzConfigService
-  ) {}
+  elementRef = inject(ElementRef);
+  protected hostView = inject(ViewContainerRef);
+  protected renderer = inject(Renderer2);
+  protected noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true });
+  protected nzConfigService = inject(NzConfigService);
+  protected platformId = inject(PLATFORM_ID);
+
+  constructor(protected componentType: Type<NzTooltipBaseComponent>) {}
+
+  ngAfterViewInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.createComponent();
+      this.registerTriggers();
+    }
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     const { trigger } = changes;
@@ -136,11 +142,6 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
     }
   }
 
-  ngAfterViewInit(): void {
-    this.createComponent();
-    this.registerTriggers();
-  }
-
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
@@ -171,7 +172,8 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
    * Create a dynamic tooltip component. This method can be override.
    */
   protected createComponent(): void {
-    const componentRef = this.componentRef;
+    const componentRef = this.hostView.createComponent(this.componentType);
+
     this.component = componentRef.instance as NzTooltipBaseComponent;
 
     // Remove the component's DOM because it should be in the overlay container.

diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts
@@ -10,16 +10,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentRef,
   Directive,
   ElementRef,
   EventEmitter,
   Host,
   Input,
   Optional,
   Output,
-  Renderer2,
-  ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
 
@@ -68,16 +65,8 @@ export class NzTooltipDirective extends NzTooltipBaseDirective {
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('nzTooltipVisibleChange') override readonly visibleChange = new EventEmitter<boolean>();
 
-  override componentRef: ComponentRef<NzToolTipComponent> = this.hostView.createComponent(NzToolTipComponent);
-
-  constructor(
-    elementRef: ElementRef,
-    hostView: ViewContainerRef,
-
-    renderer: Renderer2,
-    @Host() @Optional() noAnimation?: NzNoAnimationDirective
-  ) {
-    super(elementRef, hostView, renderer, noAnimation);
+  constructor() {
+    super(NzToolTipComponent);
   }
 
   protected override getProxyPropertyMap(): PropertyMapping {