如何从AngularJs组件的控制器类中调用全局函数

Question

在app.module.js文件中，从外部库导入JS文件

import 'assets/scripts/admin';

具有全局功能：

function anonymousAdmin() {
  "use strict";

  implementation();
}

现在在app.component.js文件中具有带有函数调用的控制器：

export const AppComponent = {
  controller: class AppComponent {
    $onInit() {
      /* global anonymousAdmin */
      anonymousAdmin();
    }
  }
};

运行Webpack / Babel将所有文件（ES6）保存到一个文件（ES5）中。 不幸的是我在控制台中出错：

ReferenceError: anonymousAdmin is not defined

有人知道如何在控制器中调用此函数吗？

Answer 1

试试这个。 您需要为脚本添加别名。

import * as admin from 'assets/scripts/admin';

export const AppComponent = {
  controller: class AppComponent {
    $onInit() {
      /* global anonymousAdmin */
      admin.anonymousAdmin();
    }
  }
};

Answer 2

anonymousAdmin不是全局函数。 该文件作为ES模块导入，并且ES模块强制采用严格模式，以防止它们将变量泄漏到全局范围。

应该明确定义为全局：

function anonymousAdmin() {...}

window.anonymousAdmin = anonymousAdmin;

如果该文件属于无法直接编辑的第三方模块，并且考虑到正在使用Webpack，则可以将后者配置为使用export loader公开文件ES module export中的变量，例如：

...
module: {
  rules: [
    {
      test: require.resolve('assets/scripts/admin'),
      use: 'exports-loader?anonymousAdmin'
    }
  ]
},
...

该函数将被导入，例如：

import { anonymousAdmin } from 'assets/scripts/admin';