Angular 6出现Swiper动态内容问题

Question

Angular 6带有Swiper动态内容问题。 我想根据用户喜好动态重新排列滑动幻灯片

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <NG6componet1 ></NG6componet1>
    </div>
    <div class="swiper-slide">
      <NG6componet2 ></NG6componet2>
    </div>
    <div class="swiper-slide">
      <NG6componet3 ></NG6componet3>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

如果用户喜欢NG6componet2，NG6componet1，NG6componet3，那么我想相应地创建幻灯片， 我是使用AngularJS做到的，如下所示，

<div class="swiper-container">
    <div class='swiper-wrapper'>
        <div ng-repeat="selectedview in Ctrlr.View">
            <div ui-view='{{selectedview}}' ></div>
        </div>
    </div>
    <div class='swiper-button-prev'></div>
    <div class='swiper-button-next'></div>

我还尝试使用下面的幻灯片

this.swiper.appendSlide('<div class="swiper-slide"><NG6componet1></NG6componet1></div>');
this.swiper.update(true);

但添加div仅不加载组件

<div class="swiper-slide" style="width: 431.25px; margin-right: 20px;">
  <NG6componet1></NG6componet1>
</div>

寻求帮助以找到可行的解决方案。