在angular2中使用外部框架 [英] Using external framework with angular2

问题描述

一个通用的问题，但是它让我非常困扰，因为我在Angular2中进行编码时遇到了很多问题.

Abit of a generic question, but it is bothering me so much because I have came across so many problems while coding in Angular2.

Angular 2是一个相对较新的框架.在Angular 2出现之前，有很多以前建立的库.我想知道，我只能使用专门为Angular 2构建的框架吗?还是像爸爸分析之类的东西通过

Angular 2 is a relatively new framework. There are a lot of librarys out there that was built previously before angular 2 came out. I was wondering, can I only use framework that was specifically built for Angular 2? Or would something like papa parse work for me through

npm install --save

我如何知道哪个框架可以正常工作而无需下载，安装并最终发现错误?

How would I know which framework would work without downloading, install and finding out there's an error at the end?

推荐答案

如果您希望包含全局js文件(例如库)并将其封装在angular2(ng2)中，则可以选择以下几种方式:

If you like to include a global js file (e.g. library) and encapsulate it in your angular2 (ng2) you have several options:

选项1:

Option 1:

您可能会在这里 https://github.com/DefinitelyTyped/DefinitelyTyped 文件中找到文件，也建议您在此处查看: https://microsoft.github.io/TypeSearch

You might find its *.d.ts file in here https://github.com/DefinitelyTyped/DefinitelyTyped and also it is recommended to look here: https://microsoft.github.io/TypeSearch

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

If you found its @type you should install the library (e.g. npm install --save theLib.js) and install the @type you have found --> Once it is installed you can import the library via your code (e.g. import * as theLib from 'theLib';)

选项2:

Option 2:

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

If you can't find it you may try to generate d.ts file. For example if you have your own library that exports a class of some kind. You might want to use the following tool to generate d.ts file: https://github.com/Microsoft/dts-gen

一旦生成d.ts，您应该将其包含在tsconfig.json文件中(在"文件"键下)

Once d.ts is generated you should include it in your tsconfig.json file (under "files" key)

选项3:

Option 3:

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

In case of 3rd party library that suppose to be included as global var in your app (like jquery) but there is no @type anywhere you can include it as follow:

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

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

< script src="../node_modules/myExtLib/dist/myExtLib.js">< /script>

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

1. Add global.d.ts next to tsconfig.json and add the object declaration to it. For example if myExtLib.js create a global var myExtObj:

声明const myExtObj:any;

declare const myExtObj:any;

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

文件":[ "global.d.ts"]

"files": [ "global.d.ts" ]

现在您可以访问myExtObj全局.

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

I personally don't like such global variables so I create a service that reference it and then remove it from global namespace as follow:

服务

The service

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，而不必担心全局名称空间中有垃圾.

Now you can access myExtObj from any component by importing the service and call myExtObjRefService.myExtObj without worry that you have junk in your global namespace.

这篇关于在angular2中使用外部框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！