web-dev-qa-db-fra.com

Angular 2 execute script après le rendu du modèle

J'ai donc ce composant curseur 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 TypeScript/angular supprime les balises de script dans les modèles. 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:

/// <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');
    }
}
jqueryangulartypescript
42
Carl Boisvert

ngAfterViewInit() of AppComponent est un rappel de cycle de vie. Les appels angulaires après le rendu du composant racine et de ses enfants, doivent être adaptés à vos besoins.

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

65
Günter Zöchbauer

J'ai utilisé cette méthode (rapporté ici )

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

cela a fonctionné pour moi puisque je voulais exécuter un fichier javascript APRÈS LE RENDU DE LA COMPOSANTE.

0
elfu