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

Question

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

问题：

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

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

提前致谢！！

Answer 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

Answer 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);
}