是否有正确的方法从Angular 2(TypeScript)中的组件调用JavaScript函数?
Is there a correct way to invoke a JavaScript function from a component in Angular 2 (TypeScript) ?
这是我的组件:
import { ElementRef, AfterViewInit } from '@angular/core'; export class AppComponent implements AfterViewInit { constructor(private _elementRef: ElementRef) { } ngAfterViewInit() { /** * Works but i have this error : * src/appponent.ts(68,9): error TS2304: Cannot find name 'MYTHEME'. * src/appponent.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文件(appponent.js)中的语法是正确的:
Calling the JavaScript function directly result in an compilation error, but the syntax in the "compiled" JavaScript file (appponent.js) is correct :
AppComponent.prototype.ngAfterViewInit = function () { MYTHEME.documentOnLoad.init(); MYTHEME.documentOnReady.init(); };第二种方式(appendChild)可以正常工作,但我不认为(改变DOM来自typescript / angular)是正确的方法。
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.
我发现了这个:使用Typescript中的Javascript函数我尝试声明界面:
I found this : Using a Javascript Function from Typescript I tried declaring the interface :
interface MYTHEME { documentOnLoad: Function; documentOnReady: Function; }但TypeScript似乎无法识别它(界面没有错误)声明)。
But the TypeScript doesn't seem to recognize it (no error in the interface declaration).
谢谢
编辑:
在Juan Mendes的回答之后,这就是我的结果:
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(); } }推荐答案
你必须使用声明告诉TypeScript外部(JavaScript)声明。请参见 www.typescriptlang/docs/handbook/writing- declaration-files.html
You have to tell TypeScript about external (JavaScript) declarations using declare. See www.typescriptlang/docs/handbook/writing-declaration-files.html
interface MyTheme { documentOnLoad: Function; documentOnReady: Function; } declare var MYTHEME: MyTheme;或匿名
declare var MYTHEME: {documentOnLoad: Function, documentOnReady: Function};更多推荐
Angular 2 typescript调用javascript函数
发布评论