Angular 离子项目可点击属性不工作（离子4）

背景： 我的应用程序有一个带有3个ion项目的仪表板，我希望它们可以单击，这样当有人单击/轻触该项目时，它将导航到另一个页面

以下是一个屏幕截图，可以更好地理解：

以下是指向my github repo的链接，其中包含所有文件：

问题： 为此，我一直在尝试调用一个方法，该方法将路由到正确的页面。但是，在使用console.log进行测试时，我注意到（单击）和href根本不起作用

有人能解释一下我怎样才能让它工作吗？非常感谢您的帮助

相关代码：

    <div class="items">
   <ion-item detail> 
     <ion-button fill="clear" class="itemBtns" (click)="search()">Search for a service</ion-button>
     <ion-icon name="search" slot="start"></ion-icon> 
     <!-- <ion-label>Search for a service</ion-label>  -->
    </ion-item>

.itemBtns {
color: black;
font-size: 100%;
padding-right: 100%;  }

dashboard.page.html

---

如您所述，由于未知原因，离子项目和离子选项卡无法协调工作。通常的开发人员不会知道，因为这是一个奇怪的用例（上面没有人提到过）。幸好我看到了这个问题，否则你永远也不会得到这个分类的伴侣。让你吃惊的是，你甚至认为这是一个很好的因素，对解决这个问题很有帮助：

最好的方法是：在一个离子项目内使用一个透明的离子按钮

按钮的HTML/IONAL代码：

    <div class="items">
   <ion-item detail> 
     <ion-button fill="clear" class="itemBtns" (click)="search()">Search for a service</ion-button>
     <ion-icon name="search" slot="start"></ion-icon> 
     <!-- <ion-label>Search for a service</ion-label>  -->
    </ion-item>

.itemBtns {
color: black;
font-size: 100%;
padding-right: 100%;  }

通过HTML代码中按钮上的“fill”属性的组合，这将使按钮不可见，并应充当跨越整个项目部分的超链接

---

如果我帮助过你，请把这个标记为正确答案。如果没有，请告诉我，我将提供进一步的帮助。：）

使用ionic 5，您可以将属性按钮添加到ionic项，然后单击事件将起作用：

<ion-item button (click)="search()">
      <ion-icon name="search" slot="start"></ion-icon>
      <ion-label>Search for a service</ion-label>    
  </ion-item>

搜索服务

您好，也许我有一个解决方案，但我不确定。尝试将离子项z-index设置为100它仍然是不可点击的，无论如何，谢谢我已经对你的项目进行了测试，我没有做任何更改，只添加（点击）像你一样的事件，对我来说是有效的。这很奇怪：/。嗯，这很奇怪。对我来说，不适用于Chrome开发工具或Ionic DevApp。这很好。你正在寻找其他可能的东西。搜索服务哇，谢谢！我刚刚完成了你的代码的复制和粘贴，老实说，我并没有期待太多的运气！这很有魅力，我甚至分不清前后的区别。再次感谢！