离子项目可点击属性不起作用（Ionic 4）

Question

背景： 我的应用程序有一个仪表板，其中包含 3 个离子项目，我希望它们是可点击的，这样当有人点击/点击该项目时，它会导航到不同的页面。

下面是截图让大家更好理解：https://imgur.com/TCv3pMc

这是我的 github 存储库的链接，其中包含所有文件：https://github.com/jamesslater/boutiquesolicitors

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

有人可以解释一下我怎样才能让它工作吗？非常感谢任何帮助！

相关代码：

dashboard.page.html

<div class="nav-wrapper" style="background: white;">
<ion-header class="navbar">

    <ion-buttons slot="end">
      <ion-button (click)="logout()">
        <ion-icon slot="icon-only" color="white" name="log-out"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-img src="assets/logo.png"></ion-img>


</ion-header>
 </div>
<ion-content padding text-center>
  <div class="profile">
  <ion-avatar>
<img src="assets/user.png">
</ion-avatar>
<h1>Hello Richard,</h1>
<ion-label>How can we help you today?</ion-label>
  </div>


    <ion-item (click)="search()">
      <ion-icon name="search" slot="start"></ion-icon>
      <ion-label>Search for a service</ion-label>    
    </ion-item>
    <ion-item>
    <ion-icon name="paper" slot="start"></ion-icon>
    <ion-label>View our latest news</ion-label>
  </ion-item>
  <ion-item>
  <ion-icon name="card" slot="start"></ion-icon>
  <ion-label>Pay a bill</ion-label>
</ion-item>


  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="about">
       <ion-icon name="information-circle-outline"></ion-icon>
        <ion-label>About Us</ion-label>
      </ion-tab-button>
      <ion-tab-button href="members/dashboard">

        <ion-icon color="blue" name="home"></ion-icon>
        <ion-label>Dashboard</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon name="contacts"></ion-icon>
        <ion-label>Contact Us</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

dashboard.page.ts

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {
error = this.error; 
  constructor(private authService: AuthenticationService, private router: Router) { }

  ngOnInit() {
  }

  logout() {
    this.router.navigate(['login']);
    // this.authService.logout();
  }

  search() {
    console.log('clicked');
    this.router.navigate(['members/services']);
  }
}

Answer 1

正如你所说，离子物品和离子标签由于某些未知原因不能同时工作。通常的开发人员不会知道，因为这是一个奇怪的用例（上面没有其他人提到过）。幸好我看到了这个问题，否则你永远不会得到这个排序好的伴侣。令您惊讶的是，您甚至设法将其视为因素之一，做得很好，确实有助于解决此问题：

执行此操作的最佳方法：在离子项目内使用透明离子按钮。

按钮的 HTML/IONIC 代码：

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

这会创建一个“点击区”，这是一种绕过无法同时使用离子物品和离子标签的问题的方法。

按钮的 CSS：

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

结合 HTML 代码中按钮上的 'fill' 属性，这会使按钮不可见，并且应该充当跨越整个 ion 项目部分的超链接。

如果我帮助了你，请将此标记为正确答案。如果没有，请告诉我，我会提供进一步的帮助。 :)

Answer 2

使用 ionic 5，您可以将属性按钮添加到 ion-item 并且单击事件将起作用：

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