Angular2在组件内调用外部JS文件功能

Question

对不起，如果这个问题重复了。我无法在网上找到任何适当的解决方案，所以我在这里发布。

我在Angular2中创建一个组件。我有一个外部JS文件并动态加载它。在外部JS文件中，我具有参数的函数。我该如何在ngAfterViewInit中调用该参数。我是Angular 2的新手，所以不知道如何在Angular 2打字稿中调用JS函数，我将发布我的代码以供您参考

app.component.ts

import { Component, OnInit, ElementRef,AfterViewInit  } from '@angular/core';
declare var $:any;
@Component({
  selector: 'app-root',
  template: '<div></div>'
})
export class AppComponent implements AfterViewInit {
 urlinput;  
  constructor(elRef: ElementRef){
    this.urlinput = elRef.nativeElement.getAttribute('urlinput');
    this.loadScript();
  }
     ngAfterViewInit() {
  // need to call the js function here 
  //tried like this initializeDataTable(this.urlinput) not worked
  }
loadScript() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "app/Message.js";
    head.appendChild(script);
}  
}

message.js（外部JS文件）

function initializeDataTable(dTableURL){
        $.ajax({
                "url": dTableURL,
                "success": function(json) {
                    var tableHeaders;
                    $.each(json.columns, function(i, val){
                      tableHeaders += "<th>" + val + "</th>";
                    });
                    $("#tableDiv").empty();
                    $("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
                    $('#displayTable').dataTable(json);
                },
                    "dataType": "json"
         });
    }

index.html

  <app-root urlinput="app/array.txt">Loading...</app-root>

请帮助我解决此问题。

Answer 1

应该在window对象上创建message属性。由于窗口对象可能在某些定义文件中声明，因此您可以执行此操作：

window['message']('Hello, world!')

或将其设置为变量并使用：

var message: any = window['message'];
message('Hello, world!');

或属性打字稿方式，声明函数，可以在源文件夹中的任何名为 .d.ts的文件中进行：

declare function message(msg: string) : void;

也请参见此问题。

动态加载脚本的问题是，您无法确定代码执行时已加载脚本。您可能应该使用message(msg: string)方法创建服务。该服务的构造函数可以创建脚本标签（并检查是否已经存在单例（如果不是单身顿）），并在脚本加载后是否要处理消息。检测脚本的加载没有全面的交叉浏览器支持，因此您可以执行类似Google Analytics（分析）的操作，并设置您的外部脚本最终会打电话来处理任何已待处理消息的某些全局窗口属性：

服务：

constructor() {
  if (!window['message']) {
    window['message'] = function(msg) {
      window['messagequeue'] = window['messagequeue'] || [];
      window['messagequeue'].push(msg);
    }
  }
  // add script tag to load script
}
message(msg) {
  window['message'](msg);
}

在您的脚本中：

function message(msg) {
  console.log(msg)
  //logics goes here
}
// process messages queued before script loaded
if (window['messagequeue']) {
  window['messagequeue'].forEach(msg => message(msg));
}