我当前正在使用!=
,并且当我单击屏幕上除叠加层之外的其他任何位置时,都想将其关闭。我已经前进并订阅了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组件。
答案 0 :(得分:3)
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop'
添加用于选择和其他组件的透明背景。