angular - 1 つのコンポーネントへの 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();
    }
}