无法从BackdropClick关闭角材料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它，那么它将创建一个深灰色的背景，并且在外部单击会起作用，但是我不希望使用可见的背景，例如selete组件。

Answer 1

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

对于透明背景，请使用 css 类cdk-overlay-transparent-backdrop

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

Answer 2

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

添加选择和其他组件在其中使用的透明背景。