将外部框架与angular2一起使用

如果您想包含一个全局js文件（例如库）并将其封装在angular2（ng2）中，则可以选择以下几种方法：

选项1：

您可能会*.d.ts在这里https://github.com/DefinitelyTyped/DefinitelyTyped找到它的文件，也建议您在这里查看：https : //microsoft.github.io/TypeSearch

如果找到了它的@type，则应安装该库（例如npm install --save theLib.js）并安装已找到的@type->安装完成后，您可以通过代码（例如import * as theLib from 'theLib';）导入该库

选项2：

如果找不到，您可以尝试生成d.ts文件。例如，如果您有自己的库，可以导出某种类。您可能要使用以下工具来生成d.ts文件：https : //github.com/Microsoft/dts-gen

一旦d.ts生成，你应该包括在您的tsconfig.json文件（在“文件”键）

选项3：

如果第3方库假定是作为全局变量包含在您的应用程序中（如jquery），但在任何地方都没有@type，则可以按以下方式包含它：

1. 下载库（您认为合适的任何方式）
2. 在index.html中包含一个脚本标记以加载库

<脚本src =“ ../ node_modules / myExtLib / dist / myExtLib.js”> </ script>

3. 在global.d.ts旁边添加，然后向tsconfig.json其中添加对象声明。例如，如果myExtLib.js创建一个全局变量myExtObj：

声明const myExtObj：any;

4. 如果不存在，请将以下内容添加到tsconfig.json中

“文件”：[“ global.d.ts”]

现在，您可以访问myExtObjglobaly。

我个人不喜欢这样的全局变量，因此我创建了一个引用它的服务，然后将其从全局名称空间中删除，如下所示：

服务

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

function getWindow():any {
  return window;
}

@Injectable()
export class MyExtObjRefService {
  private _myExtObj:any;

  constructor() {
    let window = getWindow();
    this._myExtObj = window.myExtObj;
    window._myExtObj = null;
    _myExtObj = null;
  }

  get myExtObj() {
    return this._myExtObj;
  }
}

不要忘了在模块的 providers

现在，您可以myExtObj通过导入服务并调用任何组件来访问任何组件，而myExtObjRefService.myExtObj不必担心全局名称空间中有垃圾。