无法从 BackdropClick 关闭 Angular 材质 Cdkoverlay答案

【问题标题】：Cannot Close Angular Material Cdkoverlay From BackdropClick无法从 BackdropClick 关闭 Angular 材质 Cdkoverlay
【发布时间】：2018-06-29 15:07:42
【问题描述】：

我目前正在使用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 组件。

【问题讨论】：

我投票只是因为你的代码中的这一行:) this._overlayRef.backdropClick().subscribe(() => this.close()}
COMPLETE 有没有被打印出来？

标签： angular angular-material angular-cdk

【解决方案1】：

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

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

【讨论】：

如果我在指令的帮助下使用它会怎样，在这种情况下我没有覆盖的参考

【解决方案2】：

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

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

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

【讨论】：