Así que tengo este componente deslizante que usa materializecss javascript. Entonces, después de renderizar, necesito ejecutar
$(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') }); }); });Pero no sé muy bien dónde colocar esta línea, ya que la etiqueta de script de eliminación de mecanografiado/angular en las plantillas. Incluí JQuery en los archivos ts y esperaba usar el sistema de eventos, pero parece que no funciona. ¿Algunas ideas? Aquí está el código del archivo 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'); } }ngAfterViewInit() de AppComponent es una devolución de llamada de ciclo de vida Angular llama después de que el componente raíz y sus elementos secundarios se hayan procesado y debería ajustarse a su propósito.
Ver también https://angular.io/guide/lifecycle-hooks
En realidad ngAfterViewInit() se iniciará solo una vez cuando se inicie el componente.
Si realmente desea que se active un evento después de que el elemento HTML se alquile en la pantalla, puede usar ngAfterViewChecked()
Descubrí que el mejor lugar es NgAfterViewChecked(). Intenté ejecutar un código que se desplazaría a un panel ng-accordion cuando se cargara la página. Intenté poner el código en NgAfterViewInit() pero no funcionó allí (NPE). El problema era que el elemento aún no se había renderizado. Hay un problema al ponerlo en NgAfterViewChecked(). NgAfterViewChecked() se llama varias veces a medida que se procesa la página. Algunas llamadas se realizan antes de que se represente el elemento. Esto significa que es posible que se requiera una verificación de nulo para proteger el código de NPE. Estoy usando Angular 8.