使用 CDK/Overlay 创建一个附加到元素的小对话框

Question

我需要创建附加到元素的小对话框。所以我使用它的 ID 找到该元素，然后我需要在它附近显示一个小对话框，其中包含一些文本和按钮。我需要从服务中执行此操作，因为我需要它是动态的并在不同部分使用。所以我用它来按 ID 查找元素：

const element = document.querySelector('#' + step.stepAnchor);

我能够生成一个对话框：

    // We create the overlay
    this.overlayRef = this.overlay.create();
    //Then we create a portal to render a component
    const componentPortal = new ComponentPortal(PopoverComponent);
    // We add a custom CSS class to our overlay
    this.overlayRef.addPanelClass("popover");
    //We render the portal in the overlay
    this.overlayRef.attach(componentPortal);

但我不知道如何将它附加到我需要的元素上。

Answer 1

我建议针对这种情况使用指令而不是定位元素 ID，因为生成的弹出框组件应该相对于页面上的特定元素定位。我做了一个 StackBlitz 来演示我的建议，但它基本上执行您在每个指令实例中编写的设置逻辑，而是更具体地配置它。它还包括一项服务，允许您从任何地方切换任何已注册的弹出窗口：

https://stackblitz.com/edit/angular-ivy-lui6d5?file=src/app/popover-host.directive.ts

使用 CDK/Overlay 创建一个附加到元素的小对话框

Create a Small Dialog Attached to an Element Using CDK/Overlay

angular

angular-cdk