angular - Ngx-swiper-wrapper 已禁用
问题描述
我已经将一些数据加载到我的 ngx-swiper-wrapper 中。但是,当这种情况发生时,这个 swiper-button-disabled 会加载到下一个按钮和上一个按钮上。我尝试使用 javascript 删除它,但 swiper 对象仍然不会滚动。我不知道是否有办法在获取数据后刷新/重新加载 swiper 对象。
ngOnInit() {
this.spinner.show().then( async () => {
this.data.currentProgress.subscribe(progress => this.progress = progress);
await this.eventService.fetchEvents();
}).then(async () => {
this.data.totalShuffledEvents.subscribe(shuffle => this.totalEvents = shuffle);
var buttons = document.querySelectorAll('.swiper-button-next');
buttons[0].classList.remove("swiper-button-disabled");
}).then(() => {
this.spinner.hide();
});
}
<swiper *ngIf="type == 'component' && show" class="swiper-container" fxFlex="auto" [config]="config" [disabled]="disabled" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')" (swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
<div *ngFor="let event of totalEvents" class="swiper-slide">
...
解决方案
更好的解决方案是使用容器(父级)来检索 totalEvents,然后通过 @Input 将其传递给您的 ngx-swiper-component。
下面是一个例子: changeDetection: ChangeDetectionStrategy.OnPush //非常重要
@ViewChild(SwiperDirective) swiperDirectiveRef: SwiperDirective;
ngOnChanges() {
if (this.swiperDirectiveRef) {
this.swiperDirectiveRef.setIndex(0);
this.cdRef.detectChanges();
if (this.swiperDirectiveRef.swiper()) {
setTimeout(() => {
this.swiperDirectiveRef.swiper().lazy.load();
}, 0);
}
}
}
或者:您可以为此创建一个方法并在您的订阅中调用它:
ngOnInit() {
this.spinner.show().then( async () => {
this.data.currentProgress.subscribe(progress => this.progress = progress);
await this.eventService.fetchEvents();
}).then(async () => {
this.data.totalShuffledEvents.subscribe(shuffle => {
this.totalEvents = shuffle;
this.refreshSwipper();
});
}).then(() => {
this.spinner.hide();
});
}
refreshSwipper() {
if (this.swiperDirectiveRef) {
this.swiperDirectiveRef.setIndex(0);
this.cdRef.detectChanges();
if (this.swiperDirectiveRef.swiper()) {
setTimeout(() => {
this.swiperDirectiveRef.swiper().lazy.load();
}, 0);
}
}
}
推荐阅读
- mysql - 同桌选择好友请求
- rust - rust 如何将 &i32 与 i32 相乘?
- python - 使用单独的 Xpath 获取 Web 中的第一个元素
- symfony4 - OnetoMany 不坚持
- java - 如何将黄瓜中的@Before标签与TestNG中的@Parameters标签用于相同的方法
- python - 无法在带有熊猫的元组列表中用 0 替换空值
- flutter - 在 VS 代码中过滤调试控制台输出?
- python - 在 Apache 2.4 中让子域正确路由的问题
- html - 如何自动调整图像大小以适应引导程序 4 中的容器?
- java - 使用ArrayList的ArrayList时读写Parcel