не активируются интерактивные свойства ионных элементов (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

Как вы уже сказали, ионные элементы и ионные вкладки не работают в унисон по неизвестной причине.Не было бы известно обычному разработчику, так как это странный вариант использования (о котором никто не говорил выше).Хорошо, что я видел этот вопрос, иначе вы бы НИКОГДА не получили этого отсортированного приятеля.Удивило, что вам даже удалось считать это одним из факторов, хорошо сделанных для этого, которые действительно помогают с разрешением для этого:

Лучший способ сделать это: использовать прозрачную ионную кнопку внутриЭлемент ion.

Код 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%;  }

С помощью комбинации свойства 'fill' для кнопки в коде HTML это делает кнопку невидимой и должна действоватьв виде гиперссылки, охватывающей весь раздел ионного элемента.

Пожалуйста, пометьте это как правильный ответ, если я помог вам.Если нет, дайте мне знать, и я предложу дальнейшую помощь.:)