javascript - Angular 8 项目中的外部 .js 文件

Question

我尝试从 Angular 组件调用 .js 文件中的函数，但收到错误“ERROR ReferenceError:myTest 未在 TechnologiesComponent.onClick 中定义”。

我已按照here描述的步骤进行操作，所以我在 src 文件夹中创建了一个名为 custom.js 的文件。

该文件包含以下内容:

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

$(function() {
  alert('Hello, custom js');
});

我已将脚本添加到我的 angular.json 的脚本数组中，如下所示:

        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": ["src/custom.js"]
      },

我想要使用 .js 文件的 .ts 文件如下所示:

import { Component } from '@angular/core';

declare const myTest: any;

@Component({
  selector: 'app-technologies',
  templateUrl: './technologies.component.html',
  styleUrls: ['./technologies.component.css']
})
export class TechnologiesComponent {
  onClick() {
    myTest();
  }
}

一个按钮已添加到我的模板中: 点我

按下按钮时，会抛出错误“ERROR ReferenceError:myTest 未在 TechnologiesComponent.onClick 中定义”。为什么？

Answer 1

将你的函数声明为变量(在 JS 中两者是相同的)

自定义.js

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

另外，验证脚本是否在最终版本中导入

如果您使用ngserve，您可能需要重新构建