ロードJavascriptのスクリプトを動的に角度4

Question

に私は後でAjaxの呼び出しからなり、スクリプト自体に角度4.名前でスクリプトを動的にロードします。現在JavaScriptファイルを読み込み、JqueryをAngular Projectにインポートしました。その後、私はGetScriptメソッドを使用すると、そのファイルを読み込むことができますが、私はこのような機能を呼び出すようにしたい場合：

import { Component } from '@angular/core'; 
import * as jQuery from 'jquery'; 

declare var $:any; 
declare var jquery:any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    title = 'angular 4 with jquery'; 
    url = "currently hardcoded"; 

    getScript42(){ 
     $.getScript(this.url).done(function() { 
     logger(); 
    }); 
    } 
    } 

私は次のエラーを取得する： は名「ロガー」

を見つけるしかし、私にはできません。 JavaScriptファイル関数が定義されています：

$(document).ready(function(){ 

    function logger(){ 
    console.log("it worked"); 
    } 
}); 

私はこの機能を使用しないでください。

だから今、私の問題にあなたたちは、そのファイルをロードし、特定の機能を呼び出すための方法を知っていますか？ビューがロードされたとき、角のライフサイクルAfterViewInitで

Answer 1

が呼び出され、それはあなたのHTMLは、DOM準備し、任意の追加のスクリプトタグを受け入れる準備ができていることを意味します。

ので、あなたは、インターフェイスを実装することで、あなたのafterviewinit方法でこれらを書くことができます。

declare var $:any; 
declare var jquery:any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit { 

    title = 'angular 4 with jquery'; 
    url = "currently hardcoded"; 

     ngAfterViewInit(): void { 
     $.getScript(this.url).done(function() { 
      logger(); 
     }); 
    } 
    }