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'属性，这将使按钮不可见，并应作为跨越离子项目整个部分的超链接。

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

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>

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

2 个答案: