Angular 一个组件的角度CDK覆盖

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

@Injectable（）
导出类WaitIndicatorService{
overlayRef:overlayRef；
构造函数（公共覆盖：覆盖）{}
showSpinner（viewContainerRef:viewContainerRef）：无效{
const config=new overlyconfig（）；
config.positionStrategy=this.overlay.position（）
/*.global（）
.c.（）
.centervertical（）*/
.连接到（viewContainerRef.element，
{originX:'开始'，originY:'底部'}，
{overlayX:'开始'，overlayY:'底部'}）；
config.hascardback=true；
this.overlayRef=this.overlay.create（配置）；
attach（新组件门户（WaitSpinnerPanelComponent，viewContainerRef））；
}
hideSpinner（）：void{
this.overlayRef.dispose（）；
}
}

代码中缺少的是对要将微调器附加到的特定DOM元素的引用。您可以使用

cdkOverlayOrigin

指令传递该引用，然后将覆盖层附加到

overlayorigin.elementRef

，并将

config.hascardback

选项设置为

false

在主机组件中：

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

@ViewChild(OverlayOrigin) overlayrigin: OverlayOrigin;

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

---

现在这对你有用吗？我最终只是生活在整个应用程序被禁用的情况下，因为我无法让它对某个特定组件起作用，不得不转向其他事情。嗨，我想为某个特定组件显示背景。你能告诉我怎么做吗？我想知道你想达到什么目的。您是否有指向项目或测试设置的链接，或者您可以将代码粘贴到此处？@RedDree我正在使用内容投影并调用通用组件。如何将cdk覆盖添加到same@SunilBehera如果您发布Stackblitz项目或任何其他项目的链接，我可以很高兴地查看您的代码。听起来很有趣。从你所说的，这是完全可行的，因为你的泛型组件仍然是一个角度组件，它呈现一些HTML。你需要考虑的是1。计时（首先呈现什么？在泛型组件呈现其子组件之前、期间和之后，您可以控制哪些事件），2。哪个HTML元素可以作为覆盖源，即可以将覆盖附加到哪个元素。