angular - Angular 5 移动组件/dom 操作

Question

我正在尝试在 Angular 5 中使用 slider-lib flickity，但失败了，因为它做了一些 dom 操作，angular 不喜欢。

在他们的描述中，您必须像这样使用它：

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

这可行，但我不想将它与以下角度一起使用*ngFor：

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

但是因为 flickity 添加到 divflickity-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 一起使用。