Angular 2打字稿调用javascript函数

2024-03-13

是否有正确的方法从 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)工作没有错误,但我不认为(从打字稿/角度改变DOM)是正确的方法。

我找到了这个 :使用 Typescript 中的 Javascript 函数 https://stackoverflow.com/questions/21544893/using-a-javascript-function-from-typescript我尝试声明接口:

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

但 TypeScript 似乎无法识别它(接口声明中没有错误)。

Thanks

Edit :

根据胡安·门德斯的回答,我的结论是:

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)声明的信息declare. See https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html 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};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2打字稿调用javascript函数 的相关文章

随机推荐

  • Intel NVMe 驱动器扇区大小不是 4096 的 xfs 文件系统导致性能下降

    我正在 Linux Ubuntu 14 04 上使用 NVMe 卡 我发现 当使用默认扇区大小 512 的 xfs 文件系统进行格式化时 Intel NVMe 卡的性能会出现一些下降 或任何其他小于 4096 的扇区大小 在实验中 我使用默
  • 将 git 存储库添加到 VSP 上的现有文件夹

    我的设置如下所示 裸仓库在我的根 srv Folder 本地仓库在我的电脑上 Gitlab 仓库 on well Gitlab 我添加了两个源 Gitlab 和我的 Bare Repo 将所有更改从本地计算机推送到源 现在我想在我的中设置一
  • pgbouncer - 关闭是因为:每个连接上的服务器不干净

    我正在运行 Django 1 3 和 PostgreSQL 9 1 PostGIS 1 5 psycopg2 2 4 2 和 pgbouncer 1 4 2 在与数据库的每个连接上 我都会在 pgbouncer log 中收到一条日志条目
  • 根据AWS标签分配ansible变量

    我正在尝试找出一种根据 AWS 中的标签在 Ansible 中分配变量的方法 我正在尝试ec2 remote tags但它返回的信息比我需要的多得多 似乎应该有一种更简单的方法来做到这一点 但我只是没有想到 例如 如果我有一个名为funct
  • 为什么 multiprocessing.Process.join() 挂起?

    我以这种方式使用多处理 import multiprocessing as mp def worker thread id tasks results tmp dir temp for format thread id os makedir
  • 如何找到解决方案中的所有扩展方法?

    如何找到解决方案中的所有扩展方法 如果我这样做 我会在所有文件中搜索字符串 this 您的搜索字符串可能会根据您的格式选项而有所不同 EDIT 经过一点实验 以下内容似乎对我来说使用 在文件中查找 Ctrl Shift F 可以高精度工作
  • 启动/停止服务器时 MySQL Workbench 冻结

    I recently started using MySQL Server and Workbench both version 8 0 and noticed a strange issue When I load Workbench g
  • 如何以编程方式更改 Mac OS X 键盘布局?

    我的 Qt 应用程序支持在 Linux 和 Windows 上更改输入语言 我还想添加对更改 Mac OSX 中的输入语言的支持 不幸的是我没有任何关于 Mac SDK 的信息 我在 OS X 上的第一个也是最后一个工作是编译 Qt 并编译
  • 找不到 spring hibernate.cfg.xml

    Configuration configuration new Configuration configure hibernate cfg xml 我的配置文件在 src 我仍然收到这个错误 有人能发现我的错误吗 您正在使用具有标准目录布局
  • 来自文档根目录的 Route-Me 离线地图

    在我的应用程序中 有一个从 sqlite 文件呈现的离线地图 RMDBMapSource mapSrc RMDBMapSource alloc initWithPath map sqlite RMMapContents contents n
  • 如何在输入密码字段中插入复选框

    我希望我的网页在密码字段内显示一个复选框 用户单击复选框并查看文本形式的密码 取消选中后 再次输入其密码 This is what I want This is from the Ebay website login page 这就是我得到
  • java垃圾收集日志中的“GC--”是什么意思?

    我们打开了详细 GC 日志记录来跟踪已知的内存泄漏 并在日志中获取以下条目 3607872 687 GC 471630K gt 390767K 462208K 0 0325540 secs 3607873 213 GC 458095K gt
  • Python 3 如何检查一个值是否已经在列表中的列表中

    我的 Python 3 中有一个列表列表 mylist a x x b x x c x x x只是一些数据 我有我的代码可以做到这一点 for sublist in mylist if sublist 0 a sublist 1 subli
  • 如何与 AlarmManager 结合启动通知?

    我正在尝试弄清楚应该如何启动通知 创建通知不是我所要求的 而是一种在后台启动它的方法 这样它就不引人注目 并且用户可以做他们正在做的任何事情 它是日历 准确地说是提醒 同样重要的是要注意我正在使用AlarmManager 我应该使用什么方法
  • ng-repeat动画完成回调

    所以我有一个简单的 ng repeat 和在 javascript 中定义的输入动画 沙盒 http codepen io anri82 pen KwgGeY http codepen io anri82 pen KwgGeY Code d
  • 从 CompletableFuture.allof() 获取单独的结果

    我有一个类 它使用 CompletableFutures 向两个依赖服务发出并发请求 我的代码如下所示 Builder Slf4j public class TestClass NonNull private final ExecutorS
  • R 中分层样本的单向方差分析

    我有一个包含三组 a b c 的分层样本 这些样本是从较大的总体 N 中抽取的 所有组都有 30 个观察值 但它们在 N 中的比例不相等 因此它们的采样权重不同 我用surveyR 中的包来计算汇总统计数据和线性回归模型 并且想知道如何计算
  • 如何使用jquery在div内容更改时发出警报

    我想在 div 内容发生变化时发出警报消息 jquery api 是否为 div 元素提供了任何侦听器 绑定dom修改事件 document ready function test div bind DOMNodeInserted DOMS
  • Pandas 数据帧性能

    Pandas 确实很棒 但我真的很惊讶从 Pandas DataFrame 检索值的效率是多么低下 在下面的玩具示例中 即使是 DataFrame iloc 方法也比字典慢 100 倍以上 问题 这里的教训是否只是字典是查找值的更好方法 是
  • Angular 2打字稿调用javascript函数

    是否有正确的方法从 Angular 2 TypeScript 中的组件调用 JavaScript 函数 这是我的组件 import ElementRef AfterViewInit from angular core export clas