Question

我正在尝试在TS文件中的组件内调用JS函数，但出现异常。

组件

import '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new GanttMaster();
  }
}

错误：

Error referecences error: GanttMaster is not defined

Answer 1

您需要更改导入.js文件的方式：

import * as gantt from '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new gantt.GanttMaster();
  }
}

如果要在多个组件中使用GanttMaster，则可以在.js中导入angular.json文件，并在app.module.ts中声明常量，例如declare const GanttMaster: any。然后，您可以在应用程序中使用它。

希望这会有所帮助。

更新

或者，您可以按照已经完成的方式导入它，但是在导入之前手动声明该函数：

declare const GanttMaster: any;
import from '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new GanttMaster();
  }
}

参考：https://stackoverflow.com/a/37084553/1331040

Answer 2

在我的项目中，我从资产加载js文件，如下所示：

将此JavaScript文件添加到angular.json文件的scripts数组中，就像上面已经添加了jquery库一样。

"scripts": [
  .....
  "src/assets/js/custom.js"
]

custom.js：

function myTest() {
    alert('Welcome to custom js');
}

您需要在组件中声明

declare const myTest: any;

从js文件导入的函数，不在TS文件中运行

2 个答案: