离子 4/5 问题与离子滑动和模态

Question

我正在尝试在离子模态中使用离子滑块显示图像预览。但是缩放功能不起作用。我添加了幻灯片选项。但不起作用。随后，缩放功能将处理普通页面。

第二个问题backdropDismiss : true单击背景时不关闭模态

这是代码

页.html

<ion-slides [options]="slideOpts">
<ion-slide *ngFor="let p of products">
<img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">
</ion-slide>
</ion-slides>

页面.ts

async openPreview(image_url){
console.log(image_url)
const modal = await this.modalController.create({
component: ImageModalPage,
showBackdrop:true,
backdropDismiss: true,
componentProps: {
image_url : image_url,
},
});
return await modal.present();
}

莫代尔.html

<ion-item class="close-fake" lines="none" text-center>
<ion-button (click)="close()" fill="clear" color="light">
<ion-icon name="close" slot="start"></ion-icon>
back
</ion-button>
<ion-slides [options]="sliderOpts">
<ion-slide>
<div class="swiper-zoom-container">
<img [src] ='image_url'>
</div>
</ion-slide>
</ion-slides>

模态网

sliderOpts = {
zoom: {
maxRatio: 5,
}
}
close(){
this.modalController.dismiss()
}

Answer 1

In html set event (ionSlidesDidLoad(="ionViewDidEnter" 和 #slides for get in code

@ViewChild("slides") slides!: any;
ionViewDidEnter(){
this.slides.update();
}

Answer 2

有类似的问题，并通过稍后通过 *ngIf 将滑块添加到 DOM 来解决它

解决方案来自这里：https://github.com/ionic-team/ionic-framework/issues/17522#issuecomment-466631844