我正在开发基于ngx-rocket入门套件的 Ionic 4 应用程序。
我有一个带有角度裁剪器元素的模态窗口和一个带有“关闭”和“应用”按钮的工具栏。
这是模态的html：
<ion-header color="c-dark-gray" no-border>
<ion-toolbar no-padding color="c-dark-gray">
<ion-buttons slot="start">
<ion-button fill="clear" no-margin no-padding text-center (click)="dismiss()">
<ion-icon slot="icon-only" name="close" color="light"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title translate color="light">Move and Scale</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear" no-padding no-margin (click)="apply()">
<ion-text translate color="c-orange" text-uppercase>Apply</ion-text>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content color="c-dark-gray">
<ion-grid no-padding no-margin>
<ion-row>
<ion-col no-padding no-margin>
<angular-cropper
#cropper
*ngIf="_image"
[cropperOptions]="_cropperjsSettings"
[imageUrl]="_image"
[ngClass]="{'round-cropper': _round}"></angular-cropper>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
问题：在 Android 和浏览器（chrome、FF 和 safari）上一切正常，但仅在 iPhone 设备上的 Safari 上（在 5、7、8+ 上测试），按钮不会触发点击事件。实际上，我放置在模态页面上、页眉、页脚、工具栏或内容中、裁剪器上方、下方，甚至是其顶部的绝对定位覆盖层上的任何按钮或可点击元素都不起作用，并且仅在 iPhone 设备上（苹果浏览器）。模态框上的裁剪器元素工作正常。
此外，按钮是可访问和可点击的——它们与点击进行视觉交互，在检查器中，当点击按钮元素时，我可以看到类在按钮元素上发生变化。但是由于某种原因，没有点击事件发送到应用程序，并且点击处理程序没有运行。如果我删除 angular-cropper 元素，按钮可以正常工作。
我尝试将模式转换为弹出框，但结果相似（按钮未触发点击事件）。我没有尝试过的一件事是为作物设置一个完整的路由页面，但这不是一个可接受的解决方案，设计明智。
我还创建了一个带有类似页面和模态的小型离子侧菜单测试应用程序，但在那里一切正常，所以这不是 Ionic 在模态上不支持裁剪器的问题。请注意，整个小工具在 V3 中运行良好。问题发生在最新的 Ionic4 上。
我错过了什么？有没有我没有导入的模块？欢迎任何想法或线索。
打开模态的代码：
async cropBanner(ev: any) {
const modal = await this.modal.create({
component: ModalImageCropComponent,
componentProps: {
event: ev,
ratio: 3 /4
},
showBackdrop: false
});
modal.onDidDismiss()
.then((evMod: OverlayEventDetail<any>) => {
this._bannerInput.getInputElement()
.then((val: HTMLInputElement) => {
log.debug('resetting input');
val.value = null;
});
});
await modal.present();
}
以及模态的 ngModule 声明：
@NgModule({
declarations: [
ModalImageCropComponent
],
exports: [
ModalImageCropComponent
],
entryComponents: [
ModalImageCropComponent
],
imports: [
CommonModule,
IonicModule,
AngularCropperjsModule
]
})
包：
离子信息
Ionic:
ionic (Ionic CLI) : 4.10.3
System:
NodeJS : v10.15.1
npm : 6.8.0
OS : macOS High Sierra
版本
Angular CLI: 7.3.1
Node: 10.15.1
OS: darwin x64
Angular: 7.2.4
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.1
@angular-devkit/build-angular 0.13.1
@angular-devkit/build-optimizer 0.13.1
@angular-devkit/build-webpack 0.13.1
@angular-devkit/core 7.3.1
@angular-devkit/schematics 7.3.1
@angular/cli 7.3.1
@ngtools/webpack 7.3.1
@schematics/angular 7.3.1
@schematics/update 0.13.1
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
npm 列表 | grep 离子
├─┬ @ionic-native/core@5.0.0
├─┬ @ionic-native/splash-screen@5.0.0
├─┬ @ionic-native/status-bar@5.0.0
├─┬ @ionic/angular@4.0.2
│ ├─┬ @ionic/core@4.0.2
│ │ └── ionicons@4.5.5
├─┬ @ionic/v4-migration-tslint@1.7.0
├── cordova-plugin-ionic-keyboard@2.1.3
├── cordova-plugin-ionic-webview@3.1.2