单击按钮关闭角度CDK覆盖

我正在为带有角cdk覆盖的模态窗口创建服务,并且已经按照本教程进行操作:Tutorial

我想以某种方式将此覆盖的引用传递给覆盖的组件,因为我想通过单击按钮来关闭该组件。有人可以帮我传递或提取参考文献吗?

我尝试将FilePreviewOverlayRef导入到file-preview-overlay.component中,但没有帮助。

Code

a123123aaaaa 回答:单击按钮关闭角度CDK覆盖

Here,我对您的代码做了一些修改。那不是一个最佳的解决方案,但是至少您会有一个主意。

ComponentPortal具有称为注入器的属性,该属性用于实例化组件。我用它来注入初始数据(在您的情况下为FilePreviewOverlayService)进行覆盖。

,

非常简单的实现:

<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 事件关闭覆盖图。

本文链接:https://www.f2er.com/3057784.html

大家都在问