angular 2 : Using slick caroussel inside a template

问题:

I use slick carousel as a component in my angular project ; this slick component is like below :

@Component({     selector: 'slick-slider',      template: `         <ng-content></ng-content>`,     styleUrls:['./slick.component.css']       }) export class SlickSliderComponent implements AfterViewInit{   @Input() options: [any];     $element: any;      constructor(private el: ElementRef) {} ngAfterViewInit() { this.$element = jQuery(this.el.nativeElement).slick(this.options);  }  } 

in the template of foodsComponent who use this slick component I have a menu of 7 tab list each one fetch different content:

<ul class="resp-tabs-list"> <li (click)="onGetFoodsByCategorie(1)"></li> <li (click)="onGetFoodsByCategorie(2)"></li> <li (click)="onGetFoodsByCategorie(3)"></li> .. ..</ul> <slick-slider class="slick-slider" *ngIf="foods" >       <div class="item"  style="width: 450px;" *ngFor= "let food of foods">     <div class="thumbnail-menu-modern" >   .. .. </slick-slider> 

Onload the page the slick work fine because I display the first menu cause of this function on foodsComponent ngOnInit() {this.onGetFoodsByCategorie(1);} but when I click in any menu the slick dosnt work I find the reason why this is happening is because the plugin itself drastically modifies the html that is generated by the *ngfor leaving angular unable to update the repeater as it no longer can identify the structure. How -.Uninitialize the plugin. -.Update the repeater. -.Reinitialize the plugin.

回答1:

If you're using the slick-slider component I detailed here I think you'll need to modify it a little. I was reading the specs of the slider here and you have methods to add/remove a slide. So maybe the workaround would be adding a new method to the slick-slider component to update the sliders. Something like this:

update(elements: any[]) {     jQuery(this.el.nativeElement).slickRemove() //for each slide you have     jQuery(this.el.nativeElement).slickAdd('...') //for each new slide with the required template } 

Haven't tested this, but I think this could be the way to go.

文章来源: angular 2 : Using slick caroussel inside a template