如何在Angular+TypeScript中禁用Syncfusion PDF Viewer超链接？解决运行时错误

你遇到的TypeError: Cannot read properties of undefined (setting 'hyperlinkClick')错误，核心原因是执行代码时this.pdfViewer实例还未初始化完成，处于undefined状态。以下是具体的解决步骤和修正方案：

1. 确保PDF Viewer实例已正确初始化 #

如果是Angular项目，你应该通过@ViewChild获取PDF Viewer实例，需确保在实例可用后再进行操作：

• 确认@ViewChild的引用正确，且等待组件视图初始化完成（比如在ngAfterViewInit生命周期钩子之后）。
• 在设置属性前先判断实例是否存在，避免undefined报错：

  if (data.file && this.pdfViewer) { // 增加this.pdfViewer存在性检查
    const base64Url = 'data:application/pdf;base64,' + data.file;
    this.pdfViewer.enableHyperlink = false; // 使用正确的属性禁用超链接
    this.pdfViewer.load(base64Url, '');
  }
  

2. 使用Syncfusion官方推荐的禁用超链接方式 #

Syncfusion PDF Viewer禁用超链接的正确方式是设置enableHyperlink属性为false，hyperlinkClick是事件回调而非开关属性：

• 模板中直接配置：

  <!-- 模板里初始化时禁用超链接 -->
  <ejs-pdfviewer [enableHyperlink]="false" ...></ejs-pdfviewer>
  

• 组件类中动态设置：

  this.pdfViewer.enableHyperlink = false;
  

3. 修正后的完整代码示例 #

private getSingleTest() {
  if (!this.testId) return;
  this.testService.getUrl(`get-test-with-file/${this.testId}`)
    .subscribe((data) => {
      this.test = data.test;
      this.initForms(data.test);

      if (data.file && this.pdfViewer) { // 检查pdfViewer实例是否存在
        const base64Url = 'data:application/pdf;base64,' + data.file;
        this.pdfViewer.enableHyperlink = false; // 正确禁用超链接
        this.pdfViewer.load(base64Url, '');
      }

      if (data.test) {
        this.onGradeChange(data.test.sectorId)
      }
    });
}

额外注意事项 #

• 避免在组件构造函数中操作pdfViewer，此时视图未初始化，实例必然是undefined。
• 若pdfViewer是异步加载的组件，可增加延迟等待或调整ViewChild的配置确保获取到有效实例。

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