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!');

或者属性typescript方式，声明函数，这可以放在源文件夹中名为.d.ts的任何文件中：

declare function message(msg: string) : void;

另见this question。

动态加载脚本的问题是您无法确定代码执行时是否加载了脚本。您可能应该使用message(msg: string)方法创建服务。该服务的构造函数可以创建脚本标记（如果不是单例，则检查是否已存在），如果要在脚本加载后处理它们，则排队消息。检测脚本的加载没有完整的跨浏览器支持，因此您可以执行类似谷歌分析的操作，并设置一些外部脚本将在最后调用以处理任何待处理消息的全局窗口属性：

在服务中：

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

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

1 个答案: