无法通过 BackdropClick 关闭 Angular Material Cdkoverlay

Question

我目前正在使用 Angular Material cdkoverlay，当我点击屏幕上除叠加层之外的任何其他地方时，我想关闭它。我已经订阅了 backdropClick() 但我无法启动它。

launchOverlay() {
        let strategy = this.overlay.position()
        .connectedTo(
            this._overlayOrigin,
            {originX: 'end', originY: 'top'},
            {overlayX: 'end', overlayY: 'top'} );
        let config = new OverlayConfig({positionStrategy: strategy, width: '280px', scrollStrategy: this.overlay.scrollStrategies.reposition()});
        this._overlayRef = this.overlay.create(config);
        this._overlayRef.attach(new TemplatePortal(this.filterTemplate, this.viewContainerRef));
        this._overlayRef.backdropClick().subscribe(() => this.close()}, () => console.log("ERROR"), () => console.log("COMPLETE"));
}

 close(){
    this._overlayRef.dispose();
}

<ng-template cdkPortal #columnFilter>
    <mat-card>
        HELLO WORLD
    </mat-card>
</ng-template>

创建和启动叠加层的一切工作正常，它只是响应外部点击。

如果我将 hasBackdrop: true 添加到 OverlayConfig，那么它会创建深灰色背景，并且点击外部可以正常工作，但我不想要可见的背景，例如选择组件。

Answer 1

hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop'

添加 select 和其他组件使用的透明背景。

Answer 2

如果有人使用模板和指令，那么您可以使用 cdkConnectedOverlayHasBackdrop 和 cdkConnectedOverlayBackdropClass 指令。

对于透明背景使用 css class cdk-overlay-transparent-backdrop

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'" [cdkConnectedOverlayOpen]="isDropdownOpen"
    (backdropClick)="toggleDropdown()">

无法通过 BackdropClick 关闭 Angular Material Cdkoverlay

Cannot Close Angular Material Cdkoverlay From BackdropClick

angular-material

angular

angular-cdk