Angular2材质：在md选项卡上动态设置样式？

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

我已尝试根据tab.archived属性将css类设置为“item archived”或“item active”，但在初始化组件时会重写所有HTML，从而删除我刚才设置的类

我在谷歌上搜索了一段时间，但对于如何最好地做到这一点，我真的没有得出结论性的答案。 我发现的极少数示例都使用预定义的静态样式，而不是将逻辑添加到等式中

我假设没有优雅的方法可以做到这一点，需要一种变通方法吗

我的代码（简化）：

...

---

我想这应该不会太难，对吧？有人能告诉我一个干净的解决方案吗？

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

<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>

这仅在将重要属性设置为属性时适用，在其他情况下失败

---

我使用了一种变通方法，它基于这样一个事实：当选择选项卡并在选项卡上添加css样式时，

ng reflect active

属性设置为

true

：

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

它目前适用于角材质2.0.0-beta.3

---

更新：只是一个提醒；当您为生产目的构建应用程序时，这将不起作用。这些ng reflect类是在angular处于开发模式时添加的。

您应该使用ngStyle而不是Head。我意识到在大多数情况下，ngStyle是最好的方法，但在这种情况下它不起作用。“无法绑定到'ng style'，因为它不是'md tab'的已知属性。”

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

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