如何在打印页面之前等待DOM完全加载？

Question

当尝试在Angular应用程序上打印页面时，无论是使用window.print（）还是按Ctrl + P，都会打开打印窗口，但不会显示页面上的大部分内容。取消第一次尝试后，第二次尝试将在打印窗口中正确呈现页面，但是重新加载应用程序将恢复为在打印窗口中未正确显示内容。

中显示的内容是几个<div>元素，这些元素被设置为边框样式，以及父组件中距离组件树很远的部分（ navbar组件和整个页脚组件，它们是app组件的直接子代。）

所有内容在发生时都会正确显示在页面上，并包装在<ng-container *ngIf="!loading">元素中。接收到所有组件数据后，将加载设置为false。

组件的加载方式如下：

ngOnInit() {
  this.load();
}

load() {
  // data is loaded from a service
  this.loading = false;
  setTimeout(window.print(), 500);
}

我尝试在其他生命周期挂钩（ngAfterContentInit，ngAfterViewInit）中调用window.print()函数，但没有明显变化。

我还尝试设置更长的超时时间（最长20秒），但这也没有明显的区别。

修改 我尝试在尝试打印之前将document.ready记录到控制台，并将其记录为complete

编辑2 看来问题出在调用window.print()时，是因为样式表未完全加载。我已经通过将组件的CSS移到一个单独的文件来管理创可贴修复，因为主要样式表非常大。尽管该解决方案不是最佳解决方案，但已解决了该问题。

是否是在调用window.print()函数时未完全加载和呈现DOM的情况？如果是这样，我如何在尝试打印页面之前确保它是正确的？

Answer 1

尝试使用afterviewInt（）

ngAfterViewInit() {
   this.load();
}

Answer 2

ngAfterViewInit() {
   this.load();
   this.cdref.detectChanges();
}

其中cdref是ChangeDetection的实例 在AfterViewInit（）之后打印页面将加载全部内容。