从Angular 2组件调用纯javascript函数

Question

我有一个文件,有几十个javascript函数.我想要做的是将该文件导入Angular 2组件并运行在"external.js"文件中定义的init()函数.

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

import "../../../../assets/external.js";

@Component({
    selector: 'app-component',
    templateUrl: 'app.component.html'
})
export class ComponentNameComponent implements AfterViewInit {
    constructor() { }

    ngAfterViewInit(): void {
      // invoke init() function from external.js file
    }
}

external.js使用import和ngAfterViewInit()加载我想调用external.js中的init()函数,该函数调用该外部文件中的所有其他方法.

这是external.js的一部分:

function init() {
  callFunction1();
  callFunction2();
}

Answer 1

您可以导入和声明外部对象.之后,您可以在组件中使用它.

import 'external.js'
declare var myExtObject: any;

我在plunker中做了一个例子:https://plnkr.co/edit/4CrShwpZrDxt1f1M1Bv8 ？ p = preview

希望这可以帮助.

Answer 2

检查我的 angular 6 git 项目 - 我在登录组件中使用了它 -

https://github.com/gajender1995/Angular-HighChart-Auth

外部.js

define(["require", "exports"], function(require, exports){
   exports.value = "aaa";
   exports.gajender = function(){console.log(2)}; 
});

登录.component.ts

 import * as MyModule from './exter.js';

 console.log('my value is', MyModule.gajender());

在tsconfig添加

"allowJs": true