javascript - example - Slick Carrusel con Angular 2

slider carousel

Question

Hola, estoy empezando con Angular 2 y trato de hacer que este plugin de carrusel funcione: slick

Después de un tiempo logré que funcionara como un componente como este:

import { Component, Input, ElementRef, AfterViewInit, AfterContentInit} from ''@angular/core'';
declare var jQuery: any;

@Component({
    selector: ''slick-slider'',
    template: `
        <ng-content></ng-content>
    `
})
export class SlickSliderComponent implements AfterContentInit{
    @Input() options: any;

    $element: any;

    defaultOptions: any = {};

    constructor(private el: ElementRef) {
    }

    ngAfterContentInit() {
        for (var key in this.options) {
            this.defaultOptions[key] = this.options[key];
        }

        this.$element = jQuery(this.el.nativeElement).slick(this.defaultOptions);
    }
}

Y lo usaría así en una plantilla:

<slick-slider>
    <div><img class="btn btn-lg" src="/assets/img/img1.png" /></div>
    <div><img class="btn btn-lg" src="/assets/img/img2.png" /></div>
    <div><img class="btn btn-lg" src="/assets/img/img3.png" /></div>
    <div><img class="btn btn-lg" src="/assets/img/img4.png" /></div>
    <div><img class="btn btn-lg" src="/assets/img/img5.png" /></div>
</slick-slider>

Esto funciona bien. Pero cuando trato de usarlo dentro de * ngPara esto:

<slick-slider>
    <div *ngFor="let source of sources">
        <img class="btn btn-lg" (click)="watchSource(source)" src="/assets/img/{{source.name}}.png" />
    </div>
</slick-slider>

Deja de funcionar. Supongo que se debe a que el inicio del control deslizante se realiza antes de que se representen los elementos <div> . Porque termino con este html renderizado:

<slick-slider class="slick-initialized slick-slider">
    <div>
      <img ... >
    </div>
    <div>
      <img ... >
    </div>
    <div>
      <img ... >
    </div>
    <div>
      <img ... >
    </div>

    <div aria-live="polite" class="slick-list draggable">
      <div class="slick-track" role="listbox" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
        <!-- Divs should be rendered here with slick styles included -->
      </div>
  </div>
</slick-slider>

¿Alguna idea de cómo hacer que esto funcione? Intenté usar "ngAfterContentInit" y "ngAfterViewInit" ninguno parece funcionar.

Este es el componente que usa SlickSliderComponent:

import { Component, OnInit } from ''@angular/core''
import { DeviceSource } from ''./device-source''
import { RemoteService } from ''./remote.service'';

@Component({
    selector: ''device-selector'',
    moduleId: module.id,
    templateUrl: ''device-selector.component.html'',
    providers: []
})



export class DeviceSelectorComponent implements OnInit {

    sources: [DeviceSource];

    ngOnInit(): void {
        this.getDeviceSources();
    }

    constructor(private remoteService: RemoteService){}

    getDeviceSources(): void {
        this.remoteService.getDeviceSources().then(sources => this.sources = sources);
    }
}

Y aquí está el servicio utilizado:

import { Injectable } from ''@angular/core''
import { DeviceSource } from ''./device-source''

export const DEVICE_SOURCES:[DeviceSource]=
[
    {id: 1, dispayName: ''TV'', name:''tv''},
    {id: 2, dispayName: ''Chrome'', name:''chrome''},
    {id: 3, dispayName: ''Cable'', name:''cable''},
    {id: 4, dispayName: ''XBox'', name:''xbox''},
    {id: 4, dispayName: ''Pi'', name:''pi''},

];


@Injectable()
export class RemoteService {
    getDeviceSources(): Promise<[DeviceSource]> {
        return Promise.resolve(DEVICE_SOURCES); 
    }
}

Answer 1

Debe agregar la directiva *ngIf a su slick-slider para que se inserte en DOM una vez que se haya completado la fuente de datos, en este caso son sources variables:

<slick-slider *ngIf="sources">
    <div *ngFor="let source of sources">
        <img class="btn btn-lg" (click)="watchSource(source)" src="/assets/img/{{source.name}}.png" />
    </div>
</slick-slider>

Answer 2

En mi caso, el truco con * ngIf no fue suficiente. Estoy llamando al servicio REST en ngOnInit y recibiendo una respuesta donde en la suscripción estoy definiendo la matriz. La única solución posible para mí fue agregar elementos pulidos manualmente mediante la función slick ''slickAdd'' directamente desde mecanografiado.

jQuery(''.my-slick'').slick(''slickAdd'', ''<div><h3>ahoj</h3></div>'');

Tal vez ayude a alguien ...