[英]Slick Carousel with Angular 2
嗨我開始使用Angular 2並試圖使這個carousel插件工作: 光滑
過了一會兒,我設法讓它像這樣的組件一樣工作:
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>
這很好用。 但是,當我嘗試在* ng中使用它時,像這樣:
<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>
它停止工作。 我假設是因為滑塊的init是在渲染<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);
}
}
您應該將*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>
在我的情況下,使用* ngIf的技巧還不夠。 我在ngOnInit中調用REST服務並在訂閱中接收響應我正在定義數組。 對我來說唯一可行的解決方法是直接從typescript手動添加光滑的功能'slickAdd'。
jQuery('.my-slick').slick('slickAdd', '<div><h3>ahoj</h3></div>');
也許它會幫助某人......
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.