ionic 5 Modal在iOS上显示空白页面

Posted 2023-03-15

【中文标题】ionic 5 Modal在iOS上显示空白页面

【英文标题】：ionic 5 Modal shows blank page on iOS

【发布时间】：2019-11-24 16:33:41

【问题描述】：

我在 ios 上的 Ionic 5 Angular 8 上显示模态时遇到问题。

所以我有一个带有两个按钮的页面，一个在同一个页面组件中声明，另一个来自子组件。 单击同一页面中的按钮时，模式打开正常。 当子组件中的按钮被点击时，事件被发送到父 Page，然后创建模态，但是模态向上滑动，在视口之外。

我已经尝试了我能想到的所有可能的故障排除方法： 删除所有自定义 CSS，删除所有 html，更改事件路径，添加超时等。 我的整个应用程序中没有任何自动对焦或引导程序：[]。 这是页面的样子

export class MyPage implements OnInit, OnDestroy 
   //...
   private openModal (params) 
     const obj = 
      component: ModalComponent,
      componentProps: params
    ;
    this.modalProvider.create (obj).then (
        modal => 
        modal.onDidDismiss().then(
           () => 
        );
        modal.presente ();
     
    )
   

   public onOpenModal () 
      const params = 
           //custom properties
      
      this.openModal(params);
   

   public localAction () 
      const params = 
          // custom params
       
      this.openModal (params)
   

现在在模板方面：

<ion-content force-overscroll="false" [scrollY]="false">
  <!-- Some html --->
  <ion-grid (click)="localAction()">
     <!-- Some html --->
  </ion-grid>
  <!-- Some html --->
  <child-component (modalOpenEmitter)="onOpenModal($event)">

</ion-content>

【参考方案1】：

好的，经过几个小时的挖掘，我发现了问题。 原来是因为子组件承载了一个水平滚动的按钮列表。

当单击子组件中的按钮时，会正常发出一个事件，但我使用的是一个名为 scrollintoview 的 DOM 函数，如下所示：

子组件.ts：

public btnClicked (value) 
   //...
   this.clickEmitter.emit(value); // Normal stuff
   const element = document.getElementById(value.id);
   if (element) 
      element.scrollIntoView(); // This caused the the modal to disappear 
   

此 scrollIntoView 用于使单击的按钮在视口中进一步滑动。

不幸的是，这在 iOS 上破坏了模式，但顺便说一下，它在 android 上运行良好。