Question

提出了一般性问题，但这让我非常困扰，因为我在Angular2编码时遇到了很多问题。

Angular 2是一个相对较新的框架。有很多图书馆是在角度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 - ＆gt;安装完成后，您可以通过代码导入库（例如import * as theLib from 'theLib';）

选项2：

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

生成d.ts后，您应该将其包含在tsconfig.json文件中（＆＃34; 文件＆＃34;键下）

选项3：

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

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

＆LT; script src =＆＃34; ../ node_modules / myExtLib / dist / myExtLib.js＆＃34;＆gt;＆lt; /脚本＆GT;

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

声明const myExtObj：any;

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

＆＃34;文件＆＃34;：[ ＆＃34; global.d.ts＆＃34; ]

现在您可以访问myExtObj globaly。

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

服务

＆＃13;

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;
  }
}

＆＃13;

不要忘记在模块providers

现在，您可以通过导入服务从任何组件访问myExtObj并调用myExtObjRefService.myExtObj，而无需担心您的全局命名空间中存在垃圾。

使用带有angular2的外部框架

1 个答案: