Angular 5 个移动组件/dom 次操作

Question

我正在尝试在 Angular 5 中使用滑块库 flickity，但失败了，因为它做了一些 dom 操作，angular 不喜欢.

在他们的描述中你必须这样使用它：

<div class="gallery">
  <div>slide 1</div>
  <div>slide 2</div>
<div>

这有效，但我不想将它与 angulars *ngFor 一起使用，例如：

<div class="gallery">
  <div *ngFor="let slide of slides;">slide </div>
<div>

但是因为 flickity 添加到 div flickity-viewport 和 flickity-slider，并将幻灯片放在那里，angular 不喜欢它。

<div class="gallery">
  <div class="flickity-viewport">
    <div class="flickity-slider">
    since the two outer divs are created dynamically by the lib, the items in here are falling out back to the `.gallery` div
    </div>
  </div>
</div>

因此，在滑动时，slides 从 .flickity-slider 中删除并添加到 .gallery 中（可能是因为 *ngFor 在 .gallery 中初始化）。

我有什么想法可以让它工作吗？

Answer 1

您可以尝试将组件上的封装设置为ViewEncapsulation.None

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  encapsulation: ViewEncapsulation.None
})
export class MyComponent implements OnInit {
    ngOnInit() { }
}

Answer 2

Angular 正在重建 DOM，因为我没有使用 trackBy 函数。使用它时，它无需重建 DOM 即可工作，而 flickity 可与 *ngFor 一起使用。

Angular 5 个移动组件/dom 次操作

Angular 5 moving component / dom manipulations

flickity

angular