angular - 无法从 BackdropClick 关闭 Angular 材质 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'

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

Answer 2

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

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

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