时间戳

首页 > 解决方案 > Angular 8 项目中的外部 .js 文件

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

问题描述

我正在尝试从 Angular 组件调用 .js 文件中的函数，但出现错误“错误 ReferenceError：myTest 未在 TechnologiesComponent.onClick 中定义”。

我已按照此处描述的步骤进行操作，因此我在我的 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 is not defined at TechnologiesComponent.onClick”。为什么？

标签： javascriptangular

解决方案

将您的函数声明为变量（在 JS 中两者相同）

自定义.js

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

另外，验证脚本是否在最终构建中被导入

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

推荐阅读