2016-01-19 27 views
5

我正在學習Angular 2,並且我已經遵循了Egghead的教程,但對於Angular的所有內容我都很新穎。在Angular 2中使用第三方庫(parse.com)

現在我想要做一些更先進,並開始使用Parse.com與角2 通常我會通過<script src="//www.parsecdn.com/js/parse-1.6.2.min.js"></script>包括在index.html頁面的parse.com庫,但我想通過寫一個角度ParseService 2,我可以用它來管理後端。

我似乎無法找到如何在我想寫的服務中包含和使用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('', ''); 
    } 
} 

我需要某種導入在頁面的頂部,包括解析,但從哪裏我應該得到必要的庫?我已經通過npm嘗試過,但沒有成功。任何人已經試過這個?

+0

你知道如何從'.../...'中導入{Parse}嗎?//這是我想要做的事情嗎?我也卡在那裏。 – Sam

+0

看看我的答案,你是腳本cdn做錯了,如果你更新它可能是我會創建一個演示 – Aravind

回答

-1

你需要做什麼,是你需要下載解析庫:

npm install parse 

然後,你需要引用它在你的導入以正確的方式 - 你需要指定在哪個文件夾解析.js文件被放置在。

+0

這不會回答你如何導入Parse in angular2作爲@ThijsM在「import {Parse} '.../...'; // < - 這是我想要做的事情「 – Sam

3

uksz是對的。你必須首先通過在命令

npm install --save parse 

通過鍵入

import {Parse} from 'parse'; 

欲瞭解更多信息看看這個鏈接https://forum.ionicframework.com/t/how-to-require-xyz-in-ionic2-angular2/42042

希望它安裝的組件後,你可以將其導入任何其他成分幫助;)

已更新

機智h新版本的角度這種方法停止了工作。這是我的新的一步一步:如何在Angular2使用解析庫

  1. 安裝解析組件項目

    npm install parse --save 
    
  2. 安裝解析類型

    npm install @types/parse --save 
    
  3. 進口解析模塊

    const Parse: any = require('parse'); 
    
  4. 使用解析模塊

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

與智能感知享受它;)

0

你可以通過在Angular2

使用OpaqueToken。在單獨的ts文件中創建一個用於在下面查找實例的令牌。

import { OpaqueToken } from '@angular/core' 

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

2.在你App.module,則需要進口和聲明一個變量這是你的窗口對象,這使得該標記作爲angular2服務,使您可以使用名稱屬性,在你的組件的JavaScript文件中的方法。

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

步驟3:進樣到您的模塊的提供者陣列。

{ provide : name_of_The_Token , useValue : name_Of_The_Window_Object } 

指導使用此標記在部件

  1. 導入令牌就像從角芯

    import { name_of_The_Token } from '/* file_Path */'; 
    import { Inject } from '@angular/core'; 
    
  2. 任何其他服務和@Inject在組件

    的構造
    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; 
     ..... 
    }