离子 5 模态在 iOS 上显示空白页

Question

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

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

我已经尝试了我能想到的所有可能的故障排除方法： 删除所有自定义 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>

Answer 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 
}
}

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

不幸的是，这在iOS上喙模态，但顺便说一下，它在Android上运行良好。