(IONIC 4) ion-tab-button 在单击/选择时不改变颜色答案

【问题标题】：(IONIC 4) ion-tab-button do not change color when clicked/selected(IONIC 4) ion-tab-button 在单击/选择时不改变颜色
【发布时间】：2019-11-22 12:01:54
【问题描述】：

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

问题是：当点击ion-tab-buttons 时，它们可以正确导航到其他页面，但颜色仅在使用 Routes 和“loadchildren”路由时才会改变。

使用 CSS：

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

我尝试在所有选项卡中使用loadChildren 路由，但某些选项卡将重定向到组件并且没有成功。我还尝试在 CSS 中使用伪类，例如

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

实际文件：

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

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

我需要一些方法来更改单击按钮时的颜色

【问题讨论】：

当我将动态参数添加到选项卡时，我遇到了同样的错误，因此选项卡类和值将取决于参数。我使用@Rich Tillis 的解决方案来解决我的问题。

标签： angular ionic4

【解决方案1】：

我不确定这是否正是您正在寻找的，但也许您可以使用这种想法的某种形式来解决您的问题。

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

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。

我遇到了 Simon Grimm 的这种模式 here。他有一些非常棒的教程。

希望对你有帮助

【讨论】：

【解决方案2】：

当您检测到正确的路径时，您可以将“tab-selected”按钮的类从 true 更改为 false。

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

【讨论】：