javascript – 带角度2的Slick Carousel

嗨,我从Angular 2开始,试图让这个转盘插件工作： slick

过了一会儿,我设法让它像这样的组件工作：

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

我会在模板上使用它：

<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>

这工作正常但是当我尝试使用它在* ngFor这样：

<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>

它停止工作.我假设是因为滑块的初始化在< div>之前完成.元素正在呈现.因为我最终得到这个渲染的html：

<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>

任何想法如何使这项工作？我尝试使用“ngAfterContentinit”和“ngAfterViewInit”似乎都不工作.

这是使用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);
    }
}

这里是使用的服务：

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'},dispayName: 'Pi',name:'pi'},];


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

解决方法

您应该将* ngIf指令添加到您的光滑滑块,以便在数据源填充后插入到DOM中,在这种情况下它是可变源：

<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>