是否有正确的方法从Angular 2(TypeScript)中的组件调用
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 / angular更改DOM)是正确的方法.
我发现了这个:Using a Javascript Function from Typescript我尝试声明界面:
- interface MYTHEME {
- documentOnLoad: Function;
- documentOnReady: Function;
- }
但是TypeScript似乎没有识别它(接口声明中没有错误).
谢谢
编辑:
在Juan Mendes的回答之后,这就是我的结局:
- 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();
- }
- }
您必须使用declare告诉TypeScript有关外部(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};