在Angular 4（TypeScript）中调用RollMyFile JS API的技术问题

我之前在Angular项目里整合第三方JS库时也踩过类似的坑，针对你用RollMyFile API遇到的问题，给你几个实用的解决方法：

1. 声明全局变量解决TypeScript类型报错 #

因为你是在index.html里直接引入的外部脚本，RollMyFile的API是挂载在全局window对象上的，但TypeScript默认不知道这个全局变量的存在，所以会抛出“RollMyFile is not defined”的错误。

你可以在需要调用API的组件文件顶部添加全局声明：

declare var RollMyFile: any;

如果想让类型检查更严谨，也可以手动定义API的类型接口（参考官方API文档的方法和参数）：

// 定义配置项接口
interface RollMyFileOpenOptions {
  url: string;
  // 根据API文档补充其他可选配置，比如width、height等
}

// 定义实例方法接口
interface RollMyFileViewer {
  open(options: RollMyFileOpenOptions): void;
  // 其他API方法，比如close()等
}

// 声明全局RollMyFile对象
declare var RollMyFile: {
  create(): RollMyFileViewer;
};

2. 确保脚本加载完成后再调用API #

Angular组件初始化的时机可能早于外部脚本的加载完成时间，导致调用API时对象不存在。你可以利用Angular的生命周期钩子ngAfterViewInit，或者监听window的load事件来确保脚本加载完毕：

import { Component, AfterViewInit } from '@angular/core';

declare var RollMyFile: any;

@Component({
  selector: 'app-document-viewer',
  templateUrl: './document-viewer.component.html'
})
export class DocumentViewerComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 先检查全局对象是否已存在
    if (typeof RollMyFile !== 'undefined') {
      this.initializeDocumentViewer();
    } else {
      // 若未加载，等待window加载完成后再初始化
      window.addEventListener('load', () => {
        this.initializeDocumentViewer();
      });
    }
  }

  private initializeDocumentViewer(): void {
    const viewer = RollMyFile.create();
    // 传入你的文档URL
    viewer.open({
      url: 'https://example.com/your-document.pdf'
    });
  }
}

3. 更规范的类型定义方案 #

如果社区有维护RollMyFile的TypeScript类型包，你可以通过npm安装：

npm install @types/rollmyfile --save-dev

如果没有官方或社区的类型包，你可以在项目的src目录下创建一个typings.d.ts文件，把之前的全局声明放在里面，这样整个项目都能识别RollMyFile的类型，不用在每个组件里重复声明。

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