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

Question

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

问题：

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

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

先谢谢!!

Answer 1

<强> 1。如何在Angular项目中包含JavaScript文件？

您需要在资产文件夹中包含 JS 文件，并在 .angular-cli.json 文件中引用此JS文件。< / p>

参考快照，

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

.angular-cli.json

<强> 2。如何从Typescript类调用JavaScript函数？

你的TS应该是这样的。

myJsFile.js文件内容。

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

Answer 2

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

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

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

例如：

app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var 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);
}