Angular2調用外部JS文件函數裏面的組件

Question

對不起，如果這個問題是重複的傢伙。我無法找到任何合適的解決方案，所以我在這裏發佈。

我正在角2創建一個組件。我有一個外部js文件並動態加載它。在外部的js文件中，我有一個帶參數的函數。如何在ngAfterViewInit內調用該參數。我是新來的角2，所以不知道怎麼稱呼在角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; 

見this question了。

動態加載腳本的問題在於，您無法確定在執行代碼時加載了腳本。您可能應該使用message(msg: string)方法創建服務。該服務的構造函數可以創建腳本標記（並檢查是否已經存在，如果不是單例），並在腳本加載後處理它們時排隊消息。檢測腳本的加載沒有完整的跨瀏覽器支持，所以你可以做一些像谷歌分析一樣的東西，並設置一些全局窗口屬性，你的外部腳本將在最後調用處理任何未決消息：

In服務：

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