角2はテンプレートレンダリング後にスクリプトを実行します

Question

したがって、私はこのスライダコンポーネントにmaterializecss javascriptを使用しています。それがレンダリングだ後だから、私は

$(document).ready(function(){ 
    $('body').on('Slider-Loaded',function(){ 
     console.log('EVENT SLIDER LOADED'); 
     $('.slider').slider({full_width: true}); 
     $('.slider').hover(function() { 
      $(this).slider('pause'); 
     }, function() { 
      $(this).slider('start') 
     }); 
    }); 
}); 

を実行する必要がある。しかし、テンプレートでtypescriptです/角度削除スクリプトタグので、このラインをどこに置くかはかなり知っている私にはありません。私はtsファイルにJQueryを組み込み、イベントシステムを使用したいと考えていましたが、それはうまくいかないようです。何か案は？ AppComponentの

/// <reference path="../../typings/main.d.ts" /> 
import {Component, Input} from 'angular2/core'; 
import { RouterLink } from 'angular2/router'; 
import {ServerService} from './server'; 


@Component({ 
    selector: 'slider', 
    templateUrl:'/app/template/slider.html', 
    directives: [ ], 
}) 

export class SliderComponent { 
    @Input() images; 
    private server: ServerService; 
    public constructor(server: ServerService){ 
     this.server = server; 
    } 

    ngOnInit() { 
     console.log("THROWING EVENT"); 
     $('body').trigger('Slider-Loaded'); 
    } 
} 

Answer 1

ngAfterViewInit()ルートコンポーネント後のライフサイクルコールバック角度呼び出しであり、それは子供たちがレンダリングされており、それはあなたの目的に適合する必要があります。ここではTSファイルのコードです。

も参照してくださいhttps://angular.io/guide/lifecycle-hooks

Answer 2

私は、レンダリングコンポーネントの後のJavaScriptファイルを実行したかったので、それは私のために働いた（hereを報告した）この方法

export class AppComponent { 

    constructor() { 
    if(document.getElementById("testScript")) 
     document.getElementById("testScript").remove(); 
    var testScript = document.createElement("script"); 
    testScript.setAttribute("id", "testScript"); 
    testScript.setAttribute("src", "assets/js/test.js"); 
    document.body.appendChild(testScript); 
    } 
} 

を使用しました。