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

Question

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

显示的内容有几个<div>样式化为边框的元素，以及组件树中非常靠上的父组件部分(导航栏组件的一部分和整个页脚组件，它们是应用程序组件的直接子组件)。

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

组件加载如下:

ngOnInit() {
  this.load();
}

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

我试过调用 window.print()在其他生命周期 Hook (ngAfterContentInit、ngAfterViewInit)中发挥作用，但没有明显变化。

我也试过设置更长的超时时间，最多 20 秒，但也没有明显的区别。

编辑 我尝试记录 document.ready在打印尝试之前到控制台，它记录为 complete

编辑 2 看来问题源于样式表在 window.print() 时未完全加载。叫做。由于主样式表非常大，我通过将组件的 CSS 移动到一个单独的文件来管理创可贴修复。虽然方案不是最优的，但已经解决了问题。

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

Answer 1

尝试使用afterviewInt()

ngAfterViewInit() {
   this.load();
}