Angular 2 exécute le script après le rendu du modèle

J’ai donc ce composant slider qui utilise javascript materializecss. Donc après son rendu, je dois exécuter

$(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') }); }); }); 

Mais je ne sais pas trop où mettre cette ligne puisque la balise de script typecript / angular remove dans les templates. J’ai inclus JQuery dans les fichiers ts et j’espérais utiliser le système d’événements, mais cela ne semble pas fonctionner. Des idées? Voici le code du fichier 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').sortinggger('Slider-Loaded'); } } 

ngAfterViewInit() of AppComponent est un rappel du cycle de vie. Appels angulars après que le composant racine et ses enfants ont été rendus et qu’il convient à votre objective.

Voir aussi https://angular.io/guide/lifecycle-hooks

J’ai utilisé cette méthode (rapscope ici )

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

Cela a fonctionné pour moi depuis que je voulais exécuter un fichier javascript APRÈS LE COMPOSANT RENDU.