Question

我尝试在Angular 5中使用了一个滑块-lib flickity，但是因为它做了一些dom操作而失败了，角度并不喜欢。

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

<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将div添加到div flickity-viewport和flickity-slider，并将幻灯片放在那里，因此它并不喜欢它。

<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。

角度5移动分量/ dom操作

2 个答案: