Question

我正在尝试使用CDK Overlay将材质微调器作为加载指示器添加到特定组件的顶部。但是，当我将hasBackdrop设置为true时，整个应用程序将变灰并禁用。我试图从组件传入viewContainerRef并使用connectedTo定位。我可以移动微调器的位置，但不能改变背景被禁用的区域。

@Injectable()
export class WaitIndicatorService {

    overlayRef: OverlayRef;
    constructor(public overlay: Overlay) { }

    showSpinner(viewContainerRef: ViewContainerRef): void {
        const config = new OverlayConfig();

        config.positionStrategy = this.overlay.position()
/*             .global()
            .centerHorizontally()
            .centerVertically(); */

             .connectedTo(viewContainerRef.element,
            { originX: 'start', originY: 'bottom'},
            { overlayX: 'start', overlayY: 'bottom' });

        config.hasBackdrop = true;

        this.overlayRef = this.overlay.create(config);
        this.overlayRef.attach(new ComponentPortal(WaitSpinnerPanelComponent, viewContainerRef));
    }

    hideSpinner(): void {
        this.overlayRef.dispose();
    }
}

Answer 1

您在代码中缺少的是对您试图将微调框附加到的特定DOM元素的引用。您可以使用cdkOverlayOrigin指令传递该引用，然后将overlayorigin.elementRef选项设置为config.hasBackdrop的覆盖层附加到false。

在主机组件中：

<div cdkOverlayOrigin #overlayorigin="cdkOverlayOrigin"></div>

@ViewChild(OverlayOrigin) overlayrigin: OverlayOrigin;

在微调器组件中：

showSpinner(viewContainerRef: ViewContainerRef, overlayorigin: OverlayOrigin): void {
...
config.positionStrategy = this.overlay.position()
             .connectedTo(overlayorigin.elementRef,
......

Angular CDK覆盖到一个组件

1 个答案: