Angular CDK关联覆盖层切换原点后未重新定位问题咨询

这不是Angular CDK Overlay的Bug，而是它的默认行为——CdkConnectedOverlay不会自动监听绑定的origin元素变更，所以当你切换origin后，它不会主动重新计算位置。

解决思路 #

要让覆盖层在切换origin后重新定位，你需要手动触发位置更新。具体步骤如下：

1. 获取CdkConnectedOverlay实例：在组件中通过@ViewChild获取到对应的CdkConnectedOverlay引用。
2. 切换origin后强制更新位置：每次修改绑定的origin元素后，调用该实例的updatePosition()方法，强制Overlay重新计算并更新位置。

具体代码实现 #

组件类（.ts）

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkConnectedOverlay } from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(CdkConnectedOverlay) overlay!: CdkConnectedOverlay;
  activeOrigin: ElementRef | null = null;

  setOrigin(origin: ElementRef) {
    this.activeOrigin = origin;
    // 切换origin后立即触发位置更新
    setTimeout(() => {
      this.overlay.updatePosition();
    });
  }
}

模板（.html）

<button #btn1 cdkOverlayOrigin (click)="setOrigin(btn1)">按钮1</button>
<button #btn2 cdkOverlayOrigin (click)="setOrigin(btn2)">按钮2</button>

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="activeOrigin">
  <div class="overlay-content">这是覆盖层内容</div>
</ng-template>

为什么需要setTimeout？ #

因为Angular的变更检测周期问题，当你刚赋值activeOrigin时，Overlay还没完成新origin的绑定，直接调用updatePosition()可能会获取到旧的元素信息。用setTimeout可以确保在变更检测完成后再执行位置更新，保证获取到最新的origin元素。

另外，如果你使用的是Angular 14+，也可以用ChangeDetectorRef的detectChanges()方法替代setTimeout，先触发变更检测再更新位置：

import { ChangeDetectorRef } from '@angular/core';

// 注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

setOrigin(origin: ElementRef) {
  this.activeOrigin = origin;
  this.cdr.detectChanges(); // 先触发变更检测
  this.overlay.updatePosition();
}

这样修改后，每次切换按钮时，覆盖层都会重新定位到当前点击的按钮位置了。

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