如何从 Angular 5 中的 Typescript 调用 JavaScript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49526681/
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
How to call JavaScript functions from Typescript in Angular 5?
提问by Ravi Kumar B
I'm working on PDF Viewer development in Angular 5. I'm done with writing HTML code for the UI part. Now I've JavaScript files that provide functionality for the UI elements. As Angular 5 supports typescript for implementing functionality for UI components, I want to include JavaScript files in Angular Project and call them from my Typescript code.
我正在 Angular 5 中进行 PDF 查看器开发。我已经为 UI 部分编写了 HTML 代码。现在我有了为 UI 元素提供功能的 JavaScript 文件。由于 Angular 5 支持用于实现 UI 组件功能的打字稿，我想在 Angular 项目中包含 JavaScript 文件并从我的打字稿代码中调用它们。
Questions:
问题：
- How and where to include JavaScript Files in Angular Project?
- How to call the JavaScript Functions from Typescript class?
- 如何以及在何处在 Angular 项目中包含 JavaScript 文件？
- 如何从 Typescript 类调用 JavaScript 函数？
It would be great if anyone provides me an example !!
如果有人给我举个例子就好了！！
Thanks in Advance!!
提前致谢！！
回答by Arun Raj R
1. How and where to include JavaScript Files in Angular Project?
1. 在 Angular 项目中如何以及在何处包含 JavaScript 文件？
You need to include your JSfile in the assetfolder and refer this JS file in .angular-cli.jsonfile.
您需要将您的JS文件包含在资产文件夹中，并在.angular-cli.json文件中引用此 JS文件。
Refer the snapshot's,
参考快照，
Folder structure should be like this.
文件夹结构应该是这样的。
.angular-cli.json
.angular-cli.json
2. How to call the JavaScript Functions from Typescript class?
2. 如何从 Typescript 类调用 JavaScript 函数？
your TS should be like this.
你的TS应该是这样的。
myJsFile.js file content.
myJsFile.js 文件内容。
This sample logic mentioned above will work, I have tried and tested using version 4, So I am expecting it to work with version 5 also.
上面提到的这个示例逻辑可以工作，我已经尝试使用版本 4 进行了测试，所以我希望它也可以与版本 5 一起使用。
Please see the GitHub repo(Angular8)
请参阅GitHub 存储库(Angular8)
回答by Shashikant Devani
The given answer by Arun Raj Ris perfect.
Arun Raj R给出的答案是完美的。
But for the angular 6+project you need to take angular.jsoninstead of angular-cli.json.
但对于角6+项目，则需要采取angular.json替代angular-cli.json。
also if you want to pass parameter inside external function that come from js file than use just function name.
此外，如果您想在来自 js 文件的外部函数中传递参数，而不是仅使用function name.
For Ex :
例如：
app.component.ts
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');
}
};
yourJs file :
你的Js文件：
function myfunction(params1, params2) {
console.log('param1', params1);
console.log('param2', params2);
}
