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

Question

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

问题:

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

如果有人给我一个例子,那将是很棒的!

提前致谢!!

Answer 1

1.在Angular项目中包含JavaScript文件的方式和位置？

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

参考快照,

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

.angular-cli.json

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

你的TS应该是这样的.

myJsFile.js文件内容.

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

Answer 2

Arun Raj R给出的答案是完美的。

但对于角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);
}