Question

我注意到一些材料设计组件的风格很棘手。目前，我正在尝试在md-tab上动态设置样式。选项卡可以在我的应用程序中设置为活动或存档，我只想通过将选项卡标题的文本设置为斜体来直观地指示这一点，并为其指定不同的文本颜色。

我已尝试将css类设置为'item-archived'或'item-active'，具体取决于tab.archived属性，但是在初始化组件时会重写所有HTML，删除我刚刚设置的类。

我已经搜索了一段时间，但无法就如何做到这一点找到一个确凿的答案。我发现的极少数示例都使用预定义的静态样式，而不是将逻辑添加到等式中。

我认为没有优雅的方法可以做到这一点，需要一种解决方法吗？

我的代码（简化）：

<uses-permission android:name="android.permission.SEND_SMS"/>

我认为这不应该太难做对，对吧？有人能指出我的清洁解决方案吗？

Answer 1

我使用了一种解决方法，基于以下事实：当选择了标签并在其上添加了css样式时ng-reflect-active属性设置为true：

[ng-reflect-active=true]{
  color:blue;
}

目前适用于角度材料2.0.0-beta.3

更新：只是抬头;当您为生产构建应用程序时，这将不起作用。当角度处于开发模式时，会添加这些ng-reflect类。

Answer 2

我尝试使用以下代码动态设置类

<nav md-tab-nav-bar aria-label="">
          <a md-tab-link [ngClass]="{'item-active' : activeLinkIndex == i}"
             *ngFor="let routeLink of routeLinks; let i = index"
             [routerLink]="routeLink.link"
             [active]="activeLinkIndex === i"
             (click)="activeLinkIndex = i">
            {{routeLink.label}}
          </a>
        </nav>

我的样式类包含

.item-active{
  color:blue !important;
}

仅当重要属性设置为属性时才适用，而其他情况则失败。

<强> LIVE DEMO

Angular2-material：在md-tab上动态设置样式？

2 个答案: