带有 Angular 2 的光滑旋转木马答案

【问题标题】：Slick Carousel with Angular 2带有 Angular 2 的光滑旋转木马
【发布时间】：2016-10-19 16:50:13
【问题描述】：

您好，我从 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'},
    {id: 4, dispayName: 'Pi', name:'pi'},

];


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

【问题讨论】：

你是如何填充sources 变量的，是通过http 调用吗？
不，但我正在使用服务模拟，最终它会。现在它只是调用那个服务并且它正在解决一个 Promise（就像在《英雄之旅》教程 link 的第一步中）
@OvSleep 您能否分享在 angular2 中使用 slick 的步骤
不明白 import 'slick-slider' 是怎么解决的？
我是 angular2 的新手请你帮我解决这个问题：stackoverflow.com/questions/42925338/…

标签： javascript angular slick.js

【解决方案1】：

您应该将*ngIf 指令添加到您的slick-slider，以便在填充数据源后将其插入DOM，在这种情况下它是变量sources：

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

【讨论】：

太棒了！每次source 集合更新时，我都试图找到一个解决方法，替换使用的模板并调用类似 $(elemnt).slick('addSilder', template) 的东西。这种解决方法要简单得多。谢谢！

【解决方案2】：

就我而言，使用 *ngIf 的技巧还不够。我在 ngOnInit 中调用 REST 服务并在订阅中接收响应，我正在定义数组。对我来说唯一可能的解决方法是直接从打字稿中通过 slick 函数“slickAdd”手动添加 slick 项目。

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

也许它会帮助某人......

【讨论】：