隐藏选项卡 - 突出显示特定选项卡 Ionic 3答案

【问题标题】：Hide Tabs-Highlight on specific tab Ionic 3隐藏选项卡 - 突出显示特定选项卡 Ionic 3
【发布时间】：2017-11-13 10:54:18
【问题描述】：

给定 Ionic 3 中的一组选项卡，例如：

<ion-tabs tabsHighlight="true">
<ion-tab [root]="tab1Root" tabTitle="News" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Agenda" tabIcon="time"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Album" tabIcon="image"></ion-tab>
</ion-tabs>

tabsHighlight 属性设置为 true 并且效果很好。但是由于样式的原因，我希望小“突出显示条”在特定选项卡上消失。现在我真的不在乎它是如何消失的，它可能会消失或其他什么。（实际上只要宽度小几个像素就足够了。）

但是，由于这个具有 .tab-highlight 和 .animate 类的元素是由 Ionic 添加的，我不知道如何访问这个元素。在我看到的任何地方，您都可以通过 ViewChild 访问 Angular 中的元素，但是，为此我必须标记元素，例如使用#my-ref，我不能这样做，因为它是由 Ionic 添加的。

更改 tabsHightlight 属性也不起作用。显然，一旦渲染了这个东西，就不会再次检查该属性。（据我的测试建议。）非常感谢任何帮助。

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您可以在app.scss 中为tab-highlight 设置样式，但它适用于整个应用程序。您不能仅在 css 中为特定选项卡执行此操作。您需要编写一些逻辑代码：
在tabs.html：

<ion-tabs tabsHighlight="true">
    <ion-tab [root]="tab1Root" tabTitle="News" (ionSelect)="showHighlight()" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Agenda" (ionSelect)="hideHighlight()" tabIcon="time"></ion-tab> //Assume that you want to hide tab-highlight in this tab
    <ion-tab [root]="tab3Root" tabTitle="Album" (ionSelect)="showHighlight()()" tabIcon="image"></ion-tab>
</ion-tabs>

在tabs.ts:

highlightElement: HTMLElement;
ionViewDidLoad() {
   this.highlightElement = <HTMLElement>document.querySelector(".tabs .tab-highlight"); 
}
showHighlight(){
    if(this.highlightElement)
      this.highlightElement.style.display = "block";
}
hideHighlight(){
    if(this.highlightElement)
      this.highlightElement.style.display = "none";
}

【讨论】：

非常感谢您这样做。我还尝试为更改设置动画，但到目前为止还没有运气。然而，这不是我的首要任务。

【解决方案2】：

如果它生成像.tab-highlight 这样的类，那么你可以访问它。

app.scss

.tab-highlight{
   //give your change here
}

注意：大多数情况下，当您覆盖 Ionic 默认值时，您需要使用 !important。

【讨论】：