将外部框架与 angular2 结合使用

Question

一个通用问题，但这让我非常困扰，因为我在Angular2中编码时遇到了很多问题。

Angular 2是一个相对较新的框架。有很多库是在 angular 2 问世之前构建的。我想知道，我只能使用专门为 Angular 2 构建的框架吗？或者像爸爸解析这样的东西会通过对我有用吗

npm install --save

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

Answer 1

如果你想包含一个全局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文件中(在">files"键下)

选项 3：

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

1. 下载库(任何您认为合适的方式)
2. 在索引中包含脚本标记.html以加载库

<脚本 src="../node_modules/myExtLib/dist/myExtLib.js">

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

声明 const myExtObj：any;

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

"文件"：[ "全球.d.ts" ]

现在，您可以访问全局myExtObj。

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

服务内容

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中声明它

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