无法从BackdropClick关闭角材料Cdkoverlay

时间:2018-06-29 15:07:43

标签: angular angular-material angular-cdk

我当前正在使用!=,并且当我单击屏幕上除叠加层之外的其他任何位置时,都想将其关闭。我已经前进并订阅了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,则会创建深灰色背景,并且可以在外部单击,但我不希望使用可见的背景,例如selete组件。

1 个答案:

答案 0 :(得分:3)

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

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