使用带有 angular2 的外部框架

Question

有点笼统的问题，但它让我很困扰，因为我在 Angular2 中编码时遇到了很多问题。

Angular 2 是一个相对较新的框架。在 angular 2 出现之前，有很多库是以前构建的。我想知道，我只能使用专门为 Angular 2 构建的框架吗？或者像papa parse这样的东西是否可以通过

为我工作

npm install --save

如果不下载、安装并在最后发现错误，我怎么知道哪个框架可以工作？

Answer 1

如果您想包含一个全局 js 文件（例如库）并将其封装在您的 angular2 (ng2) 中，您有多种选择：

选项 1：

你可以在这里https://github.com/DefinitelyTyped/DefinitelyTyped找到它的*.d.ts文件，也推荐看这里：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 文件中（在“files”键下）

选项 3：

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

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

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

声明 const myExtObj:any;

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

“文件”：[ “全球.d.t​​s”]

现在您可以访问myExtObj globaly。

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

服务

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，而不必担心您的全局命名空间中有垃圾。