Angular 在覆盖中动态渲染组件

我试图在加载时提供服务以显示微调器进度，但控制台中出现错误

服务内容如下：

@可注入({
providedIn:'根'
})
导出类LoadingLockDataService{
公共消息：字符串；
公共装入器类型：字符串；
公共价值：数字；
public-sizeType='fullPage'；
私有overlayRef:overlayRef=null；
构造函数（公共覆盖：覆盖）{}
公共设置消息（消息：字符串）：无效{
this.message=消息；
}
公共showOverlay（组件：任意）{
如果（！this.overlayRef）{
this.overlayRef=this.overlay.create（）；
}
const userProfilePortal=新组件门户（组件）；
this.overlayRef.attach（userProfilePortal）；
}
公共隐藏区（）{
如果（！！this.overlayRef）{
this.overlayRef.detach（）；
}
}
}

我尝试在覆盖中动态渲染的组件：

{{loadingLockDataService.message}

导出类LoadingLockComponent实现OnInit{
构造函数（公共loadingLockDataService:loadingLockDataService）{}
ngOnInit（）{}
}

我呼叫服务的地方：

ngOnInit（）{
//设置超时（（）=>{
这个.loadingLockDataService.setMessage（'Chargement en cours…'）；
这个.loadingLockDataService.showOverlay（LoadingLockComponent）；
// }, 1);
this.someService.subscribe（响应=>{
//做点什么
this.loadingLockDataService.hideOverlay（）；
});
}

我有以下错误： “错误：ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。以前的值：'fullPage:undefined'。当前值：'fullPage:true'。该视图似乎是在对其父视图及其子视图进行脏检后创建的。它是在更改检测挂钩中创建的吗？”

---

我知道在我调用服务的地方使用setTimeout，它可以正常工作，但我想正确地执行此操作。我觉得这是因为我对动态组件的渲染不好。

很好，您现在已经捕捉到了这一点，因为这是一个仅限开发人员的错误。i、 e.当您将此应用程序推送到生产环境中时，您会发现即使您没有做任何更改，也不会再出现此错误

这里的问题在于，当你打电话时，你的服务

这里发生的本质是，你的角度应用程序在问：

“我的装载状态如何？”
“加载是正确的。”
“好的，很好，你确定吗？”
“是的。”
“那么我来渲染它？”
“是的。”
“那么呈现的内容（即加载状态）是否与加载状态相同？”
“否。”
“为什么？”
“因为从你问我到我给出答案，答案都变了。”
“那么我们没有装货了？”
“不，不再是了。”

这就是为什么只需添加一个

setTimeout

，它就可以工作的原因-但是您正确地识别了，这不是正确的解决方案

您可以通过在本地设置加载状态，然后在DOM组件呈现之前或呈现完之后提前调用答案，或者要求

ChangeDetectorRef

收到新更新的警报并进行相应的更改，从而正确修复此问题

i、 e.将代码更新为以下内容：

export class LoadingLockComponent implements OnInit {
  constructor(public loadingLockDataService: LoadingLockDataService) {

    this.loadingLockDataService.setMessage('Chargement en cours...');
    this.loadingLockDataService.showOverlay(LoadingLockComponent);

    this.someService.subscribe(response => {
      // do something
      this.loadingLockDataService.hideOverlay();
    });
  }

您可以同样地更新代码，以实现代码，

afterViewInit

您还可以通过正常检查来查找，以获得提醒角度应用程序发生更改的其他方法

---

我已经在afterViewInit中尝试过了，它不起作用，我不知道我是否使用了ChangeDetectorRef，而是在“this.loadingLockDataService.showOverlay（LoadingLockComponent）；”之后使用了detectChanges（）或markForCheck（）如果您使用的是

ChangeDetectorRef

，您是否将组件的

changeDetection

更改为

changeDetection:ChangeDetectionStrategy.OnPush

？否则它在这里就没有任何意义了