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

trackBy関数を使用していなかったため、Angular は DOM を再構築していました。使用時はDOMを再構築せずにflickity動作し、*ngForで動作します。