Ionic 3（点击）事件进入模态在ios中不起作用

Posted 2023-03-05

【中文标题】Ionic 3（点击）事件进入模态在ios中不起作用

【英文标题】：Ionic 3 (click) event into Modal doesn't work in ios

【发布时间】：2019-10-29 06:54:23

【问题描述】：

我在 ios 上遇到了一个问题。 我正在实现一个聊天，其中您有一个联系人列表，当您单击其中一个时，它将显示相关消息的列表。 它在 android 和浏览器（甚至在 IOS 浏览器）上完美运行，但在 IOS 上，当我单击联系人以显示消息时，什么也没有发生。 我的函数不是从 html 调用的，即使我试图在我的 ion-content 上到处添加一些测试按钮。它只适用于我的离子头。

你能救我的命吗？

这是我的代码：

HTML：

<ion-header>
    <ion-toolbar>
        <ion-buttons>
            <button ion-button (click)="displayChat(undefined)">
                Test (works here)
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="no-scroll" style="height: 100% !important;">
    <div>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
        <ion-list class="contactList">
            <ion-item *ngFor="let chat of chats" 
             (click)="displayChat(chat)">
                chat.contactName
                 <br>
                <span class="chatDate">
                    chat.lastMessageSend
                </span>
            </ion-item>
        </ion-list>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
    </div>
</ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
    </ion-toolbar>
</ion-footer>

TS：

displayChat(chat: Chat) 
    console.log("Ok");

我将我的代码缩减为更具可读性。

享受吧！

编辑

.no-scroll .scroll-content 
    overflow: hidden;


.chatDate 
    float: right;
    font-size: 0.7em;

它在页脚中也不起作用。

【问题讨论】：

你的css类有什么（无滚动）？如果您添加页脚进行测试会点击工作吗？

您好，感谢您的回复。我编辑了我的帖子和代码

【参考方案1】：

好的，我知道问题出在哪里了。

实际上，这段代码是从 Popover 中运行到 Ionic Modal 的。

我必须让我的 Popover 保持打开状态才能使用 OnDidDismiss 方法进行一些处理，但它只有在 popover 保持打开状态时才能执行此方法。

但是，在 IOS（当然）中，如果 Popover（或可能任何其他绝对元素）在您的模态框后面，则您不能单击模态框。

所以，为了解决这个问题，我创建了一个 Observable 来处理（模态）的 OnDidDismiss 方法，我将它作为 viewCtrl.dismiss 方法的参数来让它回到 Popover 视图的 OnDidDismiss 上，并且然后订阅 Observable。

【讨论】：

你能演示一下代码吗？

【参考方案2】：

在您的按钮组件中，尝试添加 ion-item 而不是 ion-button。我有一些类似的代码，它工作正常。

例如：

<button ion-item (click)="onClick()">Click me</button>

让我知道这之后会发生什么！随时准备提供帮助。