离子 4 模态控制器对话框不起作用

Posted 2023-02-23

【中文标题】离子 4 模态控制器对话框不起作用

【英文标题】：ionic 4 modal controller dialog doesn't work

【发布时间】：2019-04-04 11:33:34

【问题描述】：

l 使用 for Ionic 4 的模态控制器对话框从另一个页面获取参数。我以正确的方式进行了编码，当我单击按钮启动模态控制器时，他没有显示。即使我在声明和 entryComponents 中添加了模型页面，但不幸的是同样的问题

您可以在图像控制台日志中看到他已经从另一个没有执行按钮的情况下带来数据参数。他看起来像现在的模态控制器自动。

模态控制器代码

 async addWeather()

    const AddWeatherModal = await this.modalController.create(
      component: AddPagePage,

    );
    await AddWeatherModal.present()
    await  AddWeatherModal.onDidDismiss().then((r) => 

          if(r.data.result)
            this.getWeather(r.data.result)
             console.log(r)
          else if (r.data.result =="")
            this.AlertNotSelected()

            console.log("No Data . ")
          


    );

  

html

<ion-header>

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="true"></ion-menu-button>

    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button (click)="addWeather()">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title text-center>محطات الرصد الجوي</ion-title>
  </ion-toolbar>



</ion-header>

<ion-content >

</ion-content>

有什么帮助吗？

【问题讨论】：

你在 app.module.ts 中导入 AddPagePageModule 了吗？

l 在 declarations 和 entryComponents 的 HomePageModule 中导入了 AddPagePage

我试过了，同样的问题！

【参考方案1】：

我发现了问题，问题出在global scss

大多数是在全局scss中添加这一行

.modal 
display: flex !important;

bootstrap 4的样式有modal类的定义，默认显示为none。现在他工作正常。

【参考方案2】：

我认为这应该可行：

const AddWeatherModal = this.modalController.create(
      component: AddPagePage,

    );
AddWeatherModal.then((modal) => modal.present());