时间戳

首页 > 解决方案 > 在 Angular 组件中引用两个 JavaScript 文件时出现问题

javascript - 在 Angular 组件中引用两个 JavaScript 文件时出现问题

问题描述

我有两个 Javascript 文件，如下所示，一个定义方法的父级和一个从父级调用该方法的子级：

父.js

function HelloWorld() {
    alert('HelloWorld');
}

child.js

HelloWorld();

在我的 Angular 组件中，我像这样引用脚本：

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

import 'src/app/parent.js';
import 'src/app/child.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-dream-app';
}

当我运行应用程序时，我在控制台中收到一条错误消息：

未捕获的 ReferenceError：未定义 HelloWorld

如果我从 Parent.js 中调用 HelloWorld() 它工作正常；但 Angular 似乎并不喜欢有两个单独的 JS 文件。当我只在一个纯 HTML 文件中执行此操作并在其中包含两个脚本时，它就可以正常工作。我的 Angular 组件缺少什么会阻止我尝试做的事情？

标签： javascriptangular

解决方案

那是因为打字稿正在将所有内容编译为封闭的匿名函数。所以你的parent.js将被编译为

(function(module, exports) {

function helloWorld () {
  console.log('hello')
}

/***/ }),

而且您无法访问该范围。

但是，如果您执行 aexport function helloWorld() {...}然后将其导入child.js如下：

child.js

import {helloWorld} from '../path/to/child.js'
helloWorld()

或者

import * as parent from './parent.js';
parent.helloWorld()

那么孩子将可以访问该功能。

推荐阅读