单击离子按钮/离子图标不起作用答案

【问题标题】：Click on ion-buttons/ion-icon doesn't work单击离子按钮/离子图标不起作用
【发布时间】：2019-02-11 20:03:00
【问题描述】：

我正在使用 Ionic 3，并且我的组件中的一个函数没有在视图上触发。我不明白，因为我的功能myGoBack() 在我通过单击其他元素运行它时起作用，但不是在我想使用的元素上（在离子图标或离子按钮上）。例如我做了一个测试按钮，它被触发了！

请帮帮我

html：

<ion-toolbar icon-start>
  <ion-buttons start icon-only (click)="myGoBack()">
       <ion-icon (click)="myGoBack()" name='arrow-back' icon-start></ion-icon>
  </ion-buttons>
   <button (click)="myGoBack()">Test</button>
  <ion-searchbar placeholder='Rechercher' (ionInput)="getItems($event,typeAffiche)"></ion-searchbar>
</ion-toolbar>

【问题讨论】：

嗨 Nico，你能分享更多关于你想要实现什么的背景吗？感觉就像你想在导航栏有搜索栏和后退按钮的地方建立用户体验 - 这很容易实现，但我不确定你正在构建的工具栏打算“活”在哪里？
A similar post 有一条评论建议增加图标的z-index。如果这不起作用，请尝试将图标包装在 button 中，就像在 this post 上建议的那样。
通过包装在一个按钮元素中它正在工作，谢谢@JosephWebber :)

标签： html angular ionic-framework ionic3

【解决方案1】：

<button ion-button icon-only clear item-right (click)="myGoBack()">
<ion-icon name='arrow-back' icon-start></ion-icon></button>

【讨论】：

【解决方案2】：

试试这个。

<ion-header>
  <ion-navbar color="habits">
      <button ion-button icon-only   (click)="chatMenu()" class="chat-menu-btn">
        <ion-icon name="md-more" ></ion-icon>
      </button>
  </ion-navbar>
</ion-header>

【讨论】：