离子按钮点击不启动离子4中的功能答案

【问题标题】：ion-button Click not firing up function in ionic 4离子按钮点击不启动离子4中的功能
【发布时间】：2019-06-21 14:18:25
【问题描述】：

我的 ionic 4 代码中有一个按钮和一个函数。理想情况下，单击按钮时，该功能应该会启动，但不会发生。

我的 HTML

<ion-content padding>
<div class="contentFlow" id="profile-content">
    <h1>Profile</h1>
    <ion-button (click)="clicked()"  expand="block" color="light">
      Logout
    </ion-button>
  </div>
</ion-content>

我的 TS：

clicked() {
    alert('hello');
  }

注意：我需要将 div 保留在我的代码中。

我该怎么办？

【问题讨论】：

你能在 Stackblitz 上重现这段代码吗？我不明白为什么它不起作用.. stackblitz.com/fork/ionic
@Zooly 我在 Stackblitz 中重新创建了它。但我猜它仍然不支持 ionic 4 并产生错误。检查它：stackblitz.com/edit/ionic-m9k2fg
确实，Ionic 的 Stackblitz 似乎被打破了..
如果你用alert以外的东西来测试你的功能怎么办？我不确定警报在移动网络视图中是否有效
多么奇怪和不幸的错误（简单的点击事件在 ion-tabs 中不起作用）。 @KumarPriyansh，你应该因为发现这一点而获得奖励。我已经玩了一个小时，试图弄清楚哪些简单的点击事件在 Ionic 中不起作用。（我也是，正在使用标签）。你会认为这将是一个比现在更早被发现的重大错误。使用 Ionic 的人是否很少有人将这个问题的答案埋在堆栈溢出帖子下的评论中？我的意思是你的解决方案应该是前面和中心并且被接受的答案。

标签： angular ionic-framework ionic-native ionic4

【解决方案1】：

这样对我有用

html

      <div text-center>
        <ion-button (click)='bcWeek()' fill='clear' size='small' >
          <ion-icon name='arrow-dropleft' ></ion-icon>
        </ion-button>
        Some text
        <ion-button (click)='fwWeek()' fill='clear' size='small' >
          <ion-icon name='arrow-dropright' ></ion-icon>
        </ion-button>
      </div>

  bcWeek() {
    console.log('back');

  }

  fwWeek() {
    console.log('fw');

  }

@Kumar Priyansh

如果你评论

<div class="contentFlow" id="profile-content">

工作了吗？

【讨论】：

【解决方案2】：

当元素的渲染重叠时，我已经看到了这样的事情。

你应该检查一下。整个元素的顶部可能有一个不可见的层。因此，您可以看到它，但无法与之交互。让我们觉得简单的按钮按下是行不通的。

干杯

【讨论】：

谢谢！这对我来说是个问题。我的 ion-tabs 覆盖了整个页面，使按钮无响应

【解决方案3】：

它不起作用：

<ion-button [hidden]="showStock" (click)="setNewStock()" color="warning" class="ion-color ion-color-warning ios button button-solid ion-activatable ion-focusable hydrated">OK</ion-button>

这是有效的：（将 func 设置为离子按钮的结尾）

<ion-button [hidden]="showStock" color="warning" class="ion-color ion-color-warning ios button button-solid ion-activatable ion-focusable hydrated" (click)="setNewStock()">OK</ion-button>

这是一种奇怪的行为，但在我的情况下它起作用了

【讨论】：