AngularOverlayCDK未附加到原点。
Angular中的Overlay CDK可用于在应用程序中创建弹出框，工具提示和下拉菜单等内容。 在某些情况下，您可能会遇到Overlay CDK未正确附加到原点的问题。 这可能是由于命名冲突或另一个Angular指令正在与Overlay CDK冲突而导致的。
以下是一些可能的
- 检查Overlay CDK directive是否已添加到所需的模块中。 如果未添加，可以通过将其添加到 NgModule 的 @NgModule.decorators 中来解决问题：
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({ imports: [OverlayModule], // ... }) export class AppModule { }
- 确保所需的组件中已正确安装了Angular CDK directive。 在下面的示例中，我们要向用户显示一个工具提示：
import { Component, OnInit } from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal';
@Component({ selector: 'app-tooltip', template: 'Hover me for tooltip' }) export class TooltipComponent implements OnInit { private tooltipOverlay: any;
constructor(private overlay: Overlay) {}
ngOnInit(): void {}
showTooltip() { const tooltipPortal = new ComponentPortal(TooltipOverlayComponent); this.tooltipOverlay = this.overlay.create({ positionStrategy: this.overlay.position().connectedTo( document.querySelector('.cdk-overlay-origin')!, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' } ), scrollStrategy: this.overlay.scrollStrategies.close(), }); this.tooltipOverlay.attach(tooltipPortal); }
hideTooltip() { if (this.tooltipOverlay) { this.tooltipOverlay.detach(); } } }
在这个例子中，我们使用了this.overlay.create()方法创建了一个overlay。 该overlay使用了connectedTo()方法沿着元素的底部边缘定位了组件。 请注意，我们使用了选择器.cdk-overlay-origin来定位元素。 您可以使用与此类似的方式调整代码来解决您的问题。
- 您可以尝试更新Angular包。 有时，升级Angular包可以解决冲突和错误。
通过使用这些解决