如何從 Angular 5 中的 Typescript 調用 JavaScript 函數？

Question

我正在 Angular 5 中進行 PDF 查看器開發。我已經為 UI 部分編寫了 HTML 代碼。 現在我有了為 UI 元素提供功能的 JavaScript 文件。 由於 Angular 5 支持用於實現 UI 組件功能的打字稿，我想在 Angular 項目中包含 JavaScript 文件並從我的打字稿代碼中調用它們。

問題：

1. 如何以及在何處在 Angular 項目中包含 JavaScript 文件？
2. 如何從 Typescript 類調用 JavaScript 函數？

如果有人給我舉個例子就好了！！

提前致謝！！

Answer 1

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

您需要將您的JS文件包含在資產文件夾中，並在.angular-cli.json文件中引用此 JS 文件。

參考快照，

文件夾結構應該是這樣的。

.angular-cli.json

2. 如何從 Typescript 類調用 JavaScript 函數？

你的TS應該是這樣的。

myJsFile.js 文件內容。

上面提到的這個示例邏輯可以工作，我已經嘗試使用版本 4 進行了測試，所以我希望它也可以與版本 5 一起使用。

更新新 Angular 版本發布的答案。 工作完美，直到版本11.2.6 。

在此處查找 Angular11 的代碼（帶參數的函數）

Answer 2

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