如何销毁 angular 8 中的 ngx-swiper-wrapper
how to destroy the ngx-swiper-wrapper in angular 8
我需要销毁移动设备中的 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',
}
}
}
如何销毁移动设备中的滑动条
我会利用 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);
}
我需要销毁移动设备中的 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',
}
}
}
如何销毁移动设备中的滑动条
我会利用 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);
}