2016-05-20 18 views
8

Angular 2 (TypeScript) içindeki bir bileşenden JavaScript işlevi çağırmanın doğru bir yolu var mı? Doğru JavaScript işlevi doğrudan derleme hatasına neden çağrılmasıAçısal 2 yazı biçimi javascript işlevini çağırır

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); 
    } 
} 

ama "derlenmiş" JavaScript dosyasında sözdizimi (app.component.js) olduğu: Burada

benim bileşenidir

İkinci yol (appendChild) hatasız olarak çalışır, ancak düşünmüyorum (DOM'yi yazı tipinden/köşeli aygıta göre değiştirerek) yapmanın doğru yolu. Bunu buldum

: Using a Javascript Function from Typescript Ben arabirim bildirerek çalıştı:

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

Ama typescript bunu (arayüz bildiriminde hata yok) tanımak için görünmüyor. Bu i ile sona erdi budur Juan Mendes'in cevap takiben

:

Teşekkür

Düzenleme

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

cevap

7

Sen declare kullanarak harici (JavaScript) bildirimleri hakkında typescript söylemeliyiz. https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

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

Ya anonim

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

Teşekkür bakın, çalışıyor! – Joshua

+0

@Joshua, dizinin yeni çıktısı gibi, adımların ayrıntılarını hazırlayabilir, bileşenlerin içindeki harici js dosyasından bir js işlevini çağırmak için arama yapabilir –

+1

@MBalajivaishnav Cevabım, ilgisiz soruları sormanız gereken yer değil. Lütfen bu yorumu silin ve yeni bir soru ekleyin, soruları burada geri dönüştürmeyiz, böylece her sorunun kendi yayını olabilir, böylece başkaları için en yararlı olabilir. –