当我使用 *NgFor 时，Flickity 停止工作

Question

我正在尝试在我正在构建的 angular 应用程序中使用 Flickity。这是 link 我也知道 ngx-flickity 但我不想要它，因为它还没有准备好生产。

下面的代码有效

<div class="carousel">
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    ...
</div>

当我使用 *NgFor 时，它停止工作没有任何错误

<div class="carousel">
    <div class="carousel-cell" *ngFor="let product of products">
        {{ product.name }}
    </div>
</div>

我也试过prepend方法，但是没用。

Answer 1

看来您应该在获取数据并初始化模板后初始化 flickity。在你的 stackblits 中将 this.flick = ... 代码移动到 ngAfterViewInit() 钩子修复了问题

Answer 2

首先，您起诉 document.querySelector('.carousel') 如果您有多个轮播元素，它将 return 只有一个元素（第一个元素）对其他元素不起作用。其次，您希望在数据 returned 和渲染后实例化 flick。一个快速的解决方法是使用这个：

  ngOnInit(): void {
  this.dataService.getProducts().subscribe(products => {
      this.products = products;
      setTimeout( () => {
       document.querySelectorAll(".carousel").forEach(c => {
        let flick = new flickity(c, { cellAlign: "left", contain: true});
        })});
    });
  }

更新：

比使用 setTimeout 更好的解决方案是使用 ChangeDetecrotRef 在从服务器接收数据后立即强制显式更改检测（呈现）。

import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
...
  constructor(private dataService: DataService, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
  this.dataService.getProducts().subscribe(products => {
      this.products = products;
      this.cdr.detectChanges();
      document.querySelectorAll(".carousel").forEach(c => {
        let flick = new flickity(c, { cellAlign: "left", contain: true});
        });
    });
  }

Demo

当我使用 *NgFor 时，Flickity 停止工作

Flickity stops working the moment i use *NgFor

flickity

angular2-directives

angular