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

Question

对不起,如果这个问题是重复的话.我无法在网上找到任何合适的解决方案,所以我在这里发帖.

我正在创建一个角度为2的组件.我有一个外部的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

这应该在对象上创建一个message属性window。由于窗口对象可能是在某个定义文件中声明的，因此您可以这样做：

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));
}