Angular2 Call External JS fileコンポーネント内の機能

Question

この質問は重複しています。私はまだWeb上に適切な解決策を見つけることができなかったので、私はここに投稿しています。

私はアンギュラ2にコンポーネントを作成しています。私は外部のjsファイルを持っていて、動的にロードしています。外部のjsファイルで、私はパラメータを持つ関数を持っています。 ngAfterViewInitの中でどのようにそのパラメータを呼び出すことができますか？私は2角度に新しいですので、角度2 typescriptです内の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!'); 

またはプロパティtypescriptです道を、関数を宣言ウィンドウオブジェクトは、おそらくいくつかの定義ファイルで宣言されているので、あなたはこれを行うことができますあまりにthis questionを参照してください

declare function message(msg: string) : void; 

：、これはあなたのソースフォルダに.d.tsという名前のファイルに行くことができます。

スクリプトを動的にロードする際の問題は、コードの実行時にスクリプトがロードされていることを確認できないことです。おそらくmessage(msg: string)メソッドを持つサービスを作成する必要があります。サービスのコンストラクタはscriptタグを作成し（シングルトンでない場合にはすでに存在するかどうかをチェックします）、スクリプトがロードされた後に処理する場合はメッセージをキューに入れることができます。スクリプトの読み込みには完全なクロスブラウザがサポートされていないため、Googleアナリティクスのような処理を行い、外部スクリプトが最後に呼び出して保留中のメッセージを処理するいくつかのグローバルウィンドウプロパティを設定できます：

サービス：

function message(msg) { 
    console.log(msg) 
    //logics goes here 
} 

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