如何在 Angular 5 中从 Typescript 调用 JavaScript 函数？

Posted 2023-03-13

【中文标题】如何在 Angular 5 中从 Typescript 调用 JavaScript 函数？

【英文标题】：How to call JavaScript functions from Typescript in Angular 5?

【发布时间】：2018-09-06 16:14:41

【问题描述】：

我正在使用 Angular 5 开发 PDF 查看器。我已经完成了为 UI 部分编写 html 代码的工作。现在我有了为 UI 元素提供功能的 javascript 文件。由于 Angular 5 支持 typescript 来实现 UI 组件的功能，我想在 Angular Project 中包含 JavaScript 文件并从我的 Typescript 代码中调用它们。

问题：

在 Angular 项目中如何以及在何处包含 JavaScript 文件？ 如何从 Typescript 类中调用 JavaScript 函数？

如果有人能给我一个例子，那就太好了！

提前致谢！！

【参考方案1】：

1.在 Angular 项目中如何以及在何处包含 JavaScript 文件？

您需要在 asset 文件夹中包含您的 JS 文件，并在 .angular-cli.json 文件中引用此 JS 文件。

参考快照，

文件夹结构应该是这样的。

.angular-cli.json

2。如何从 Typescript 类中调用 JavaScript 函数？

你的 TS 应该是这样的。

myJsFile.js 文件内容。

上面提到的这个示例逻辑可以工作，我已经使用版本 4 进行了尝试和测试，所以我希望它也可以与版本 5 一起工作。

更新新 Angular 版本的答案。在职的 完美到版本11.2.6。

查找Angular11的代码（带参数的函数）here

【讨论】：

也使用 angular 6

我想知道性能。最好的方法是在 angular.json 中包含 Js 文件。它是否已加载并准备好供所有组件调用。实际上，您使用 declare function:any 有点奇怪，这意味着我也可以在其他组件中调用该函数，对吗？不会影响性能吗？

如何在外部文件的同一方法中传递任意参数？

适用于 Angular 8。唯一的变化是，它只是 angular.json 而不是 .angular-cli.json

与 Angular 10 和 11 完美配合。

【参考方案2】：

给定的answer by Arun Raj R 是完美的。

但对于 angular 6+ 项目，您需要使用 angular.json 而不是 angular-cli.json。

如果您想在来自 js 文件的外部函数内部传递参数，而不是仅使用 function name。

例如：

app.component.ts

import  Component, OnInit, ViewChild, ElementRef  from '@angular/core';
declare function myfunction: any; // just change here from arun answer.

@Component(
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
)
export class TestComponent implements OnInit 
    constructor()  

    ngOnInit()  
        myfunction('test1', 'test2');
    
;

你的 Js 文件：

function myfunction(params1, params2) 
    console.log('param1', params1);
    console.log('param2', params2);

【讨论】：

对我不起作用。我必须传递一个参数。这没有显示任何错误，但没有提醒该函数

希望，您在 angular.json 中添加了该 javascript 文件。也停止运行 ng serve 并再次启动它。所以 angular cli 获取更新的 angular.json

是的，很抱歉没有更新我的评论。我必须在 index.html 的

而不是“var”，你应该写“function”关键字。

如何在 .ts 文件中调用具有 .js 文件参数的函数？@ShashikantDevani