离子V4：离子模式就像离子警报一样

Question

如果输入被文本区域替换，下面的ion-alert正是我们所需要的；但是，ion-alert不支持ion-textarea。

如何使用ion-modal实现完全相同的外观？

我们正在使用无角离子（离子芯）。

离子警报代码

 const alert = await alertController.create({
   header: 'Would you be willing to leave feedback?',
   inputs: [
   {
     placeholder: 'enter text'
   }],
   buttons: [
     {
       text: 'Cancel',
       role: 'cancel',
       cssClass: 'secondary',
       handler: _ => {
         alert.dismiss();
         console.log('cancel');
       }
     }, {
       text: 'Submit',
       handler: _ => {
         alert.dismiss();
         console.log('submit');
       }
     }
   ]
 });
 alert.present();

尝试使用的离子模式代码

const modalController = $('ion-modal-controller')[0];
await modalController.componentOnReady();

const modalElement = await modalController.create({
  showBackdrop: true,
  component:
    $(`<div>
          <h2>Would you be willing to provide feedback?</h2>

          <div>
            <ion-button>Cancel</ion-button>
            <ion-button>Submit</ion-button>
          </div>
      </div>`)[0]
});
await modalElement.present();

Answer 1

在调用模式的页面中：

async book() {
   const modal = await this.modalController.create({
	component: BookModal,
	componentProps: { value: 123 },
	showBackdrop: true,
	backdropDismiss: true,
	cssClass: ['booking-modal']
   });
   return await modal.present();
}

关键点是 cssClass 。然后在theme / variable.scss中，在文件末尾添加类，如下所示：

.booking-modal {
	--height: 50% !important;
}

**注意：这可能不是正确的方法，但现阶段对我有用。寻找更好的解决方案。