使用Angular Material CDK操作overlay时报positionStrategy.setOrigin不存在错误

错误原因 #

该错误的核心诱因是定位策略API混用：
你要实现视口居中的overlay使用的是GlobalPositionStrategy（全局定位策略），该策略直接相对于浏览器视口定位，本身不提供setOrigin方法。setOrigin是关联到具体DOM元素弹出的ConnectedPositionStrategy（关联定位策略）独有的API。
绝大多数场景下你出现该报错，是因为复用了已销毁的定位策略实例，或者给全局定位策略错误调用了关联定位的专属API。

修复步骤 #

• 每次打开overlay前重新生成定位策略实例，不要全局复用同一个实例
  错误示例：

  // 错误：全局复用定位策略实例，实例销毁后再次调用会触发内部API报错
  private positionStrategy = this.overlay.position()
    .global()
    .centerHorizontally()
    .centerVertically();
  
  openOverlay() {
    this.overlayRef = this.overlay.create({
      positionStrategy: this.positionStrategy,
      hasBackdrop: true
    });
    // 挂载组件逻辑
  }
  

  正确示例：

  private overlayRef: OverlayRef | null = null;
  
  constructor(private overlay: Overlay) {}
  
  openOverlay() {
    // 每次打开都生成全新的定位策略实例
    const positionStrategy = this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically();
  
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      scrollStrategy: this.overlay.scrollStrategies.block()
    });
    // 挂载组件逻辑
  }
  

• 关闭overlay时彻底销毁旧实例，避免残留上下文干扰

  closeOverlay() {
    if (this.overlayRef) {
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }
  

• 检查所有定位相关代码，确认没有给GlobalPositionStrategy调用setOrigin、withPositions这类仅属于ConnectedPositionStrategy的API。

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