Проблема со ссылкой на два файла JavaScript в компоненте Angular
У меня есть два файла Javascript, как показано ниже: родитель, который определяет метод, и дочерний элемент, который вызывает метод из родителя:
родитель.js
function HelloWorld() {
alert('HelloWorld');
}
ребенок.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';
}
Когда я запускаю приложение, я получаю сообщение об ошибке в консоли:
Uncaught ReferenceError: HelloWorld не определен
Если я вызываю HelloWorld() из Parent.js, все работает нормально; но не похоже, что у Angular есть два отдельных файла JS. Когда я делаю это только в чистом файле HTML и включаю оба скрипта, это работает просто отлично. Что мне не хватает в моем компоненте Angular, что может помешать тому, что я пытаюсь сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это потому, что typescript компилирует все в закрытые анонимные функции. Таким образом, ваш parent.js будет скомпилирован в
(function(module, exports) {
function helloWorld () {
console.info('hello')
}
/***/ }),
И у вас не может быть доступа к этой области.
Но если вы сделаете export function helloWorld() {...}, а затем импортируете его в child.js, например:
ребенок.js
import {helloWorld} from '../path/to/child.js'
helloWorld()
ИЛИ
import * as parent from './parent.js';
parent.helloWorld()
тогда ребенок будет иметь доступ к этой функции.