在 Angular 2 中使用第三方库 (parse.com)

Question

我正在学习 Angular 2 并且我已经按照 Egghead 的教程进行操作，但是我对 Angular 的所有内容都很陌生。

现在我想做一些更高级的事情并开始使用 Parse.com 和 Angular 2。 通常我会通过<script src="//www.parsecdn.com/js/parse-1.6.2.min.js"></script> 在 index.html 页面中包含 parse.com 库，但我想通过 Angular 2 编写一个 ParseService 来管理后端。

我似乎找不到如何在我要编写的服务中包含和使用 Parse。 这是我想用来测试导入的非常基本的代码。

import {Injectable} from 'angular2/core';
import {Parse} from '.../...'; // <-- This is what I want to do

@Injectable()
export class ParseService {
    constructor() {
        console.log('Creating ParseService');

        Parse.initialize('', '');
    }
}

我需要在页面顶部进行某种导入，包括 Parse，但是我应该从哪里获得必要的库？我已经通过npm 尝试过，但没有成功。有人试过吗？

Answer 1

uksz 是对的。您必须先通过命令安装组件

npm install --save parse

之后，您可以通过键入将其作为任何其他组件导入

import {Parse} from 'parse';

欲了解更多信息，请查看此链接https://forum.ionicframework.com/t/how-to-require-xyz-in-ionic2-angular2/42042

希望对你有帮助；）

更新

使用新版本的 Angular，这种方法停止工作。这是我的新步骤：如何在 Angular2 中使用 Parse 库

1. 在项目中安装 Parse 组件

   npm install parse --save
   

2. 安装解析类型

   npm install @types/parse --save
   

3. 导入解析模块

   const Parse: any = require('parse');
   

4. 使用解析模块

   Parse.initialize("key");
   ...
   

通过智能感知享受它；）

Answer 2

您可以通过在 Angular2 中使用 OpaqueToken 来做到这一点

1。在单独的 ts 文件中创建一个用于查找实例的 Token，如下所示。

import { OpaqueToken } from '@angular/core'

export let name_of_The_Token = new OpaqueToken('name_Of_The_Window_Object');

2. 在您的 App.module 中，您需要导入并声明一个变量，该变量是您的窗口对象的名称，它使Token 作为 angular2 服务，以便您可以跨组件使用该 javascript 文件中的属性、方法。

import { name_of_The_Token } from '/* file_Path */';
declare let name_Of_The_Window_Object : any;  //below your import statements

第 3 步：注入到模块的 providers 数组中。

{ provide : name_of_The_Token , useValue : name_Of_The_Window_Object }

在组件中使用此令牌的指南

1. 像任何其他服务一样导入令牌并从 angular-core 中 @Inject

    import { name_of_The_Token } from '/* file_Path */';
    import { Inject } from '@angular/core';
   

2. 在组件的构造函数中

    constructor(@Inject( name_of_The_Token ) private _serviceObject : any )       
   

3. 在组件中的任何位置，您都可以将 javascript 文件的变量和方法用作

    this._serviceObject.method1()
    this._serviceObject.variable1
    .....
   

注意：一个缺点是您将无法获得智能感知。

克服它： 如果您正在寻找智能感知，您需要将方法和变量包装在接口中，并在令牌的类型**（而不是任何）** 中使用它作为

export interface myCustom {
      method1(args): return_Type;
      method2(args): void;
      .....
   }

Answer 3

你需要做的是，你需要下载 Parse 库：

npm install parse

然后，您需要以正确的方式在导入中引用它 - 您需要指定 parse.js 文件放置在哪个文件夹中。