如何在 Angular 8 中销毁 ngx-swiper-wrapper

Question

我需要销毁移动设备中的 ngx-swiper-wrapper 怎么做

<div class="swiper-container" [swiper]="config">
<div class="swiper-wrapper">
 <div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
</div>
</div>

我的ts文件代码

    @ViewChild(SwiperDirective) swiperView: SwiperDirective;
    public config: any;
constructor(public hierarchyService: HierarchyMaintenanceService) { 
    this.swiperConfig();
  }
    this.swiperView.config = {
      init: true,
    };
swiperConfig = () => {
    this.config = {
          direction: 'horizontal',
          effect: 'slide',
          slidesPerView: 3,
          breakpoints: {
            768: { slidesPerView: 2 },
            940: { slidesPerView: 3 }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        }
}

如何销毁移动设备中的swiper

Answer 1

我会使用 ElementRef 和 Renderer2 来做到这一点

import { Renderer2, ElementRef } from '@angular/core'

...

constructor(private renderer:Renderer2, private el:ElementRef){

}

removeWrapper():void{
  const wrapper = this.el.nativeElement.querySelector('.swiper-wrapper')
  const parent = this.renderer.parentNode(wrapper);
  this.renderer.removeChild(parent, wrapper);
}