单击按钮关闭 angular CDK 覆盖

Question

我正在使用 angular cdk overlay 为模态 window 创建服务，并且我遵循了本教程：Tutorial

我想以某种方式将此覆盖层的引用传递给覆盖组件，因为我想通过单击按钮关闭此组件。任何人都可以帮助我如何传递或提取参考资料吗？

我尝试将 FilePreviewOverlayRef 导入文件预览-overlay.component，但没有帮助。

Code

Answer 1

Here，我稍微修改了你的代码。这不是最佳解决方案，但您至少会有一个想法。

ComponentPortal 有一个属性称为注入器，用于组件的实例化。我用它来注入初始数据（在你的例子中是 FilePreviewOverlayService）来覆盖。

Answer 2

实现非常简单：

<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin 
    #trigger="cdkOverlayOrigin">
    {{isOpen ? "Close" : "Open"}}
</button>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen" 
    [cdkConnectedOverlayHasBackdrop]="true"
    (backdropClick)="isOpen = false">
</ng-template>

backdropClick 事件关闭叠加层。

单击按钮关闭 angular CDK 覆盖

Close angular CDK overlay by click button

overlay

angular