Angular CDK 覆盖到一个组件

Question

我正在尝试使用 CDK 覆盖在特定组件的顶部添加一个材质微调器作为加载指示器。但是，当我将 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,
......