2016-01-19 10 views
5

Ich lerne Angular 2 und ich folgte den Tutorials von Egghead bereits, aber ich bin ziemlich neu in allem was Angular betrifft.Verwenden Sie Third Party Bibliothek (Parse.com) in Angular 2

Jetzt möchte ich etwas weiter fortgeschritten und beginnen zu tun mit Parse.com mit kantigem 2. Normalerweise würde ich die parse.com Bibliothek in der index.html-Seite über <script src="//www.parsecdn.com/js/parse-1.6.2.min.js"></script> umfassen, aber ich möchte ein ParseService über Eckige schreiben 2, die ich verwenden kann, um das Backend zu verwalten.

Ich kann nicht scheinen zu finden, wie man Parse in den Service einschließe, den ich schreiben möchte. Dies ist der grundlegende Code, den ich verwenden möchte, um den Import zu testen.

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('', ''); 
    } 
} 

Ich brauche eine Art von Import an der Spitze der Seite einschließlich Parse, aber woher soll ich die notwendige Bibliothek bekommen? Ich habe es bereits über npm versucht, aber ohne Erfolg. Wer hat das schon probiert?

+0

Haben Sie herausgefunden, wie man "Parse von .../..." importiert? // <- Das möchte ich tun "? Ich stecke auch dort fest. – Sam

+0

werfen Sie einen Blick auf meine Antwort, Sie sind Skript cdn tat falsch ist, wenn Sie es aktualisieren kann ich werde eine Demo erstellen – Aravind

Antwort

-1

Was Sie tun müssen, ist, dass Sie Parse Bibliothek herunterladen müssen:

npm install parse 

Dann müssen Sie es in Ihrem Import in die richtige Art und Weise verweisen -, in welchem ​​Ordner die Parsing angeben müssen .js-Datei wird an plaziert.

+0

Dies beantwortet nicht, wie Sie Parse in angular2 importieren, wie @ThijsM bei "import {Parse} aus '.../...'; // <- Das möchte ich tun " – Sam

3

uksz hatte Recht. Sie muss zuerst die Komponente durch das, dass

npm install --save parse 

Nach Befehl installieren Sie es wie jede andere Komponente importieren können durch

import {Parse} from 'parse'; 

Für weitere Informationen zu diesem Link https://forum.ionicframework.com/t/how-to-require-xyz-in-ionic2-angular2/42042

es aussehen eingeben Hoffnung

AKTUALISIERT)

Wit; hilft h neue Version von eckigen dieser Ansatz gestoppt zu arbeiten. Hier mein neuer Schritt für Schritt: Wie Parse-Bibliothek in Angular2 verwenden

  1. Parse Komponente zum Projekt installieren

    npm install parse --save 
    
  2. Installieren Parse Typen

    npm install @types/parse --save 
    
  3. Import Parse-Modul

    const Parse: any = require('parse'); 
    
  4. Verwendung Parse-Modul

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

es mit Intellisense Genießen;)

0

Sie können das tun, indem OpaqueToken in Angular2

verwenden.Erstellen Sie ein Token, das verwendet wird, um eine Instanz wie folgt in einer separaten ts-Datei zu finden.

import { OpaqueToken } from '@angular/core' 

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

2. In Ihrem App.module, müssen Sie Import und eine variable erklären, dass der Name Ihres Fensterobjekt ist, die das Token als angular2 Service macht so dass Sie verwenden können, Eigenschaften, Methoden in dieser Javascript-Datei über Ihre Komponenten.

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

Schritt 3: Inject es an die Anbieter Array Ihres Moduls.

{ provide : name_of_The_Token , useValue : name_Of_The_Window_Object } 

Guidance dieses Token in Komponenten verwenden

  1. Import der Token wie jeder andere Dienst und @Inject von Winkelkern

    import { name_of_The_Token } from '/* file_Path */'; 
    import { Inject } from '@angular/core'; 
    
  2. In Konstruktor der Komponente

    constructor(@Inject(name_of_The_Token) private _serviceObject : any)  
    
  3. Irgendwo in Ihrer Komponente können Sie die Variablen und Methoden Ihrer JavaScript-Datei als

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

Hinweis verwenden: Ein Nachteil ist, dass Sie nicht intellisense bekommen.

Überwindung es: Wenn Sie Intellisense suchen Sie müssen die Methoden und Variablen innerhalb einer Schnittstelle wickeln und es in der Art verwenden ** (statt vorhanden) ** Ihrer Token als

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