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

【问题标题】：ionic 5 Modal shows blank page on iOSionic 5 Modal在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>

【问题讨论】：

标签： ios angular ionic-framework ionic4

【解决方案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 上运行良好。

【讨论】：