如何将鼠标悬停触发的CDK Overlay Popover适配Angular 14及以上版本

一、现有方案适配Angular 14+步骤 #

旧版CDK Overlay悬停Popover方案需针对Angular 14+的类型严格性、依赖版本和RxJS兼容性调整，具体操作如下：

1. 对齐依赖版本
   确保@angular/cdk、@angular/core、rxjs版本与Angular 14+匹配，例如在package.json中指定：

   "@angular/cdk": "^14.2.7",
   "@angular/core": "^14.2.7",
   "rxjs": "^7.5.0"
   

   执行npm install完成依赖升级。

2. 修复类型检查问题
   Angular 14+默认开启严格类型检查，需补充明确类型：

   • 为ViewChild指定元素类型：@ViewChild('trigger') trigger!: ElementRef<HTMLElement>
   • 为OverlayRef、OverlayConfig等变量明确类型，避免any
   • 为RxJS事件流指定事件类型，例如fromEvent<MouseEvent>(...)

3. 修正RxJS导入路径
   RxJS 7+将创建类操作符移至根目录，调整导入：

   // 旧导入（错误）
   // import { merge } from 'rxjs/operators';
   // 新导入（正确）
   import { merge, fromEvent } from 'rxjs';
   import { takeUntil } from 'rxjs/operators';
   

4. 优化生命周期与清理废弃API

   • 移除CDK中已废弃的API（如部分旧版PositionStrategy方法）
   • 新增销毁逻辑：用Subject管理订阅生命周期，在ngOnDestroy中销毁OverlayRef并完成订阅释放

5. Standalone组件适配（可选）
   若使用Angular 14+的Standalone特性，需在组件/指令的imports数组中导入OverlayModule、PortalModule，无需在NgModule中声明。

二、更简便的实现方式 #

无需重复编写Overlay初始化逻辑，可选择以下两种方案：

方式1：封装Hover Popover指令 #

将Overlay的创建、事件监听逻辑封装为可复用指令，一次编写多处使用：

import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { merge, fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[appHoverPopover]',
  standalone: true
})
export class HoverPopoverDirective implements OnInit, OnDestroy {
  @Input() popoverComponent!: any; // 传入自定义弹窗内容组件
  private overlayRef!: OverlayRef;
  private destroy$ = new Subject<void>();

  constructor(private overlay: Overlay, private el: ElementRef) {}

  ngOnInit(): void {
    this.createOverlay();
    this.bindEvents();
  }

  private createOverlay(): void {
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(this.el)
      .withPositions([{
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
        offsetY: 8
      }]);

    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      hasBackdrop: false
    });
  }

  private bindEvents(): void {
    const triggerEnter$ = fromEvent(this.el.nativeElement, 'mouseenter');
    const triggerLeave$ = fromEvent(this.el.nativeElement, 'mouseleave');
    const overlayLeave$ = fromEvent(this.overlayRef.overlayElement, 'mouseleave');

    merge(triggerEnter$, triggerLeave$, overlayLeave$)
      .pipe(takeUntil(this.destroy$))
      .subscribe(event => {
        event.type === 'mouseenter' ? this.attachPopover() : this.detachPopover();
      });
  }

  private attachPopover(): void {
    if (!this.overlayRef.hasAttached()) {
      const portal = new ComponentPortal(this.popoverComponent);
      this.overlayRef.attach(portal);
    }
  }

  private detachPopover(): void {
    this.overlayRef.hasAttached() && this.overlayRef.detach();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.overlayRef.dispose();
  }
}

使用示例：

<button appHoverPopover [popoverComponent]="MyCustomPopover">悬停显示弹窗</button>

方式2：利用Angular Material Tooltip（简单文本场景） #

若仅需显示简单文本弹窗，直接使用Angular Material官方组件，无需手动操作CDK Overlay：

<button matTooltip="这是悬停提示文本" matTooltipPosition="above">悬停我</button>

内容的提问来源于stack exchange，提问作者Flash