Я работаю над приложением Ionic 4 на основе ngx-rocket стартового комплекта.
У меня есть модальное окно с элементом angular-cropper ипанель инструментов с кнопками «отклонить» и «применить».
Вот 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), но только в Safari на устройствах iPhone (протестировано на 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
ng версия
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
├─┬ @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