(IONIC 4) ion-tab-button 在点击/选择时不会改变颜色 [英] (IONIC 4) ion-tab-button do not change color when clicked/selected

问题描述

我有一个具有不同重定向方式的 ion-tab:通过 tabs.module.ts 和 [routerLink] 的路由在 html 中.

I have an ion-tab with differents ways to redirect: By Routes at the tabs.module.ts and by [routerLink] in html.

问题是:当 ion-tab-buttons 被点击时，它们可以正确导航到其他页面，但颜色只有在使用路由和loadchildren"路由时才会改变.

The problem is: when the ion-tab-buttons are clicked, they navigate to other pages correctly but the color only change when using Routes and "loadchildren" routing.

使用 CSS:

ion-tab-button {
 --color-selected: var(--ion-color-text-secondary);
}

我尝试在所有选项卡中使用 loadChildren 路由，但有些选项卡要重定向到组件并且没有成功.我也尝试在 CSS 中使用伪类，比如

I tried to use loadChildren routing in all tabs but some tabs are to redirect to a component and was not successful. I also tried to use pseudo-classes in CSS like

ion-tab-button:active {
    color: blue;
}

实际文件:

tabs.page.html

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <i class="fal fa-home-alt fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/feed/feed-user/' + id]">
      <i class="fal fa-user-circle fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/trade-room']">
      <i class="fal fa-comments-alt-dollar fa-2x"></i>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.module.ts

tabs.module.ts

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
     {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
     },
      {
        path: 'home',
        loadChildren: '../home/home.module#HomePageModule'
      },
    ]
  }
];

我需要一些方法来改变按钮被点击时的颜色

I need some way to change the color button when they are clicked

推荐答案

我不确定这正是您要找的东西，但也许您可以使用某种形式的这种想法来解决您的问题.

I'm not sure this is exactly what you are looking for but maybe you can use some form of this idea to solve your problem.

您可以在 tabs.page.ts 中订阅路由器事件并评估 url 并在 url 与重定向之一匹配时应用 css.

You can subscribe to the router events in tabs.page.ts and evaluate the url and apply css if the url matches one of the redirects.

tabs.page.ts

import { Component } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  selectedPath = '';

  constructor(private router:Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      if(event && event.url){
        this.selectedPath = event.url;
      }
    });
  }
}

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <i class="fal fa-home-alt fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/feed/feed-user/' + id]" [class.active-item]="selectedPath.includes('feed')">
      <i class="fal fa-user-circle fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/trade-room']" [class.active-item]="selectedPath.includes('trade')">
      <i class="fal fa-comments-alt-dollar fa-2x"></i>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.scss

.active-item {
  color: red;
}

这不会影响 tabs.module.ts 中定义的选项卡的现有行为.您可能需要编写更多内容来管理这些选项卡的 css.

This will not affect the existing behavior of the tabs defined in tabs.module.ts. You will probably have to write a bit more to manage the css of those tabs.

我在此处发现了这种模式，作者是 Simon Grimm.他有一些非常棒的教程.

I came across this pattern here by Simon Grimm. He has some really great tutorials.

希望能帮到你

这篇关于(IONIC 4) ion-tab-button 在点击/选择时不会改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！