2016-05-20 48 views
8

Esiste un modo corretto per richiamare una funzione JavaScript da un componente in Angular 2 (TypeScript)?Angular 2 typescript richiama la funzione javascript

Qui è la mia componente:

import { ElementRef, AfterViewInit }  from '@angular/core'; 

export class AppComponent implements AfterViewInit { 

    constructor(private _elementRef: ElementRef) { 
    } 

    ngAfterViewInit() { 
     /** 
     * Works but i have this error : 
     * src/app.component.ts(68,9): error TS2304: Cannot find name 'MYTHEME'. 
     * src/app.component.ts(69,9): error TS2304: Cannot find name 'MYTHEME'. 
     */ 
     MYTHEME.documentOnLoad.init(); 
     MYTHEME.documentOnReady.init(); 

     /** 
     * Works without error, but doesn't seem like a right way to do it 
     */ 
     var s = document.createElement("script"); 
     s.text = "MYTHEME.documentOnLoad.init(); MYTHEME.documentOnReady.init();"; 
     this._elementRef.nativeElement.appendChild(s); 
    } 
} 

chiamata la funzione JavaScript direttamente tradursi in un errore di compilazione, ma la sintassi nel file "compilato" JavaScript (app.component.js) è corretta:

AppComponent.prototype.ngAfterViewInit = function() { 
    MYTHEME.documentOnLoad.init(); 
    MYTHEME.documentOnReady.init(); 
}; 

Il 2o modo (appendChild) funziona senza errori, ma non credo (alterando il DOM da dattiloscritto/angolare) è il modo corretto di farlo.

ho trovato questo: Using a Javascript Function from Typescript ho provato dichiarando l'interfaccia:

interface MYTHEME { 
    documentOnLoad: Function; 
    documentOnReady: Function; 
} 

Ma il dattiloscritto non sembra riconoscerlo (nessun errore nella dichiarazione di interfaccia).

Grazie

Edit:

seguito la risposta di Juan Mendes questo è ciò che ho finito con:

import { AfterViewInit }  from '@angular/core'; 

interface MYTHEME { 
    documentOnLoad: INIT; 
    documentOnReady: INIT; 
} 
interface INIT { 
    init: Function; 
} 
declare var MYTHEME: MYTHEME; 

export class AppComponent implements AfterViewInit { 

    constructor() { 
    } 

    ngAfterViewInit() { 
     MYTHEME.documentOnLoad.init(); 
     MYTHEME.documentOnReady.init(); 
    } 
} 

risposta

7

Devi dire dattiloscritto su (JavaScript) dichiarazioni esterne utilizzando declare. Vedere https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

interface MyTheme { 
    documentOnLoad: Function; 
    documentOnReady: Function; 
} 
declare var MYTHEME: MyTheme; 

o anonima

declare var MYTHEME: {documentOnLoad: Function, documentOnReady: Function}; 
+0

Grazie, funziona! – Joshua

+0

@Joshua puoi rendere un po 'più elaborato i passaggi, dato che sono nuovo di dattiloscritto, cercando di invocare una funzione js dal file js esterno all'interno dei componenti –

+1

@MBalajivaishnav La mia risposta non è il posto dove puoi chiedere domande non correlate. Per favore cancella questo commento e aggiungi una nuova domanda, non ricicliamo qui le domande in modo che ogni domanda possa avere il suo post in modo che possa essere più utile per gli altri. –