2016-05-20 72 views
8

是否有從Angular 2(TypeScript)中的組件調用JavaScript函數的正確方法?Angular 2 typecript調用javascript函數

這裏是我的組件:

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

調用直接導致編譯錯誤的JavaScript函數,但「編譯」 JavaScript文件中的語法(app.component.js)是正確的:

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

第二種方式(appendChild)沒有錯誤,但我不認爲(改變從typescript /角度的DOM)是正確的方式來做到這一點。

我發現這一點:Using a Javascript Function from Typescript我想聲明的接口:

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

但打字稿似乎並沒有認識到它(在接口聲明中沒有錯誤)。

感謝

編輯:

繼胡安·門德斯回答這是我結束了:

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

回答

7

你必須告訴關於使用declare外部(JavaScript)的聲明打字稿。見https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

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

或匿名

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

謝謝,它的工作原理! – Joshua

+0

@Joshua你可以稍微詳細說明一下步驟,因爲我對打字稿很陌生,想從組件 –

+1

@MBalajivaishnav裏面調用js函數。我的答案不是你問不相干問題的地方。請刪除此評論並添加一個新問題,我們不會在此處回收問題,以便每個問題都可以擁有自己的帖子,以便對其他人最有用。 –