ngx-extended-pdf-viewer需点击或滚动才加载PDF如何修复

问题根因 #

该异常由组件默认懒渲染逻辑与Angular变更检测周期冲突导致：组件初始化阶段未主动触发渲染队列执行，直到用户产生点击、滚动等交互行为触发全局变更检测后，才会启动PDF渲染流程，造成加载等待时间过长的假象。

修复步骤 #

• 给组件添加[delayFirstView]="0"配置，关闭默认的首屏渲染延迟策略，强制组件初始化完成后立即启动渲染流程
• 显式添加[autoHeight]="false"配置，关闭自适应高度检测逻辑，避免高度计算逻辑依赖滚动事件触发，和已设置的固定高度73vh参数适配
• 若项目使用OnPush变更检测策略，在PDF加载完成回调中手动触发一次视图变更检测

修正后组件代码 #

<ngx-extended-pdf-viewer
  [src]="'assets/pdfs/sample.pdf'"
  [height]="'73vh'"
  [useBrowserLocale]="true"
  [delayFirstView]="0"
  [autoHeight]="false"
  (pdfLoaded)="onPdfLoaded()">
</ngx-extended-pdf-viewer>

补充适配代码（OnPush变更检测场景使用） #

在对应父组件中引入变更检测服务，PDF加载完成后手动触发刷新：

import { ChangeDetectorRef } from '@angular/core';

export class PdfViewerComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  onPdfLoaded(): void {
    this.cdr.detectChanges();
  }
}

内容的提问来源于stack exchange，提问作者Patel Chintan