typescript Angular 2 打字稿调用 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37348166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 typescript invoke javascript function
提问by Joshua
Is there a correct way to invoke a JavaScript function from a component in Angular 2 (TypeScript) ?
是否有从 Angular 2 (TypeScript) 中的组件调用 JavaScript 函数的正确方法？
Here is my component :
这是我的组件：
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);
}
}
Calling the JavaScript function directly result in an compilation error, but the syntax in the "compiled" JavaScript file (app.component.js) is correct :
直接调用 JavaScript 函数会导致编译错误，但“已编译”的 JavaScript 文件（app.component.js）中的语法是正确的：
AppComponent.prototype.ngAfterViewInit = function () {
MYTHEME.documentOnLoad.init();
MYTHEME.documentOnReady.init();
};
The 2nd way (appendChild) works without error, but i don't think (altering the DOM from typescript/angular) is the correct way to do it.
第二种方式 (appendChild) 可以正常工作，但我认为（从 typescript/angular 更改 DOM）不是正确的方法。
I found this : Using a Javascript Function from TypescriptI tried declaring the interface :
我发现了这一点：使用 Typescript 中的 Javascript 函数我尝试声明接口：
interface MYTHEME {
documentOnLoad: Function;
documentOnReady: Function;
}
But the TypeScript doesn't seem to recognize it (no error in the interface declaration).
但是 TypeScript 似乎无法识别它（接口声明中没有错误）。
Thanks
谢谢
Edit :
编辑 ：
Following the answer by Juan Mendes this is what i ended with :
按照胡安·门德斯的回答，这就是我的结尾：
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();
}
}
采纳答案by Juan Mendes
You have to tell TypeScript about external (JavaScript) declarations using declare. See https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
您必须使用declare. 见https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
interface MyTheme {
documentOnLoad: Function;
documentOnReady: Function;
}
declare var MYTHEME: MyTheme;
Or anonymously
或匿名
declare var MYTHEME: {documentOnLoad: Function, documentOnReady: Function};
