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

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

我试过根据tab.archived属性将css类设置为'item-archived'或'item-active'，但是当组件初始化时，所有的HTML都被重写，删除了我刚设置的类。

我已经搜索了一段时间，但不能真正想出如何最好地做到这一点的结论性答案。我发现的几个例子都使用预定义的静态样式，而不是将逻辑添加到等式中。

我假设没有优雅的方式来做到这一点，需要一种解决方法？

我的代码（简化）：

<md-tab-group class="tab-container"> 
<md-tab *ngFor="let tab of tabs" label="{{tab.name}}" class="{{ tab.archive && 'item-archived' || 'item-active' }}"> 
    ... 
</md-tab>

我想这应该不是太困难的事，对不对？任何人都可以指向一个干净的解决方案？

来源

2017-03-01 Jort

你应该使用ngStyle代替 – Aravind

我认识到ngStyle是在大多数情况下这样做的最好方法，但在这种情况下它不起作用。 “不能绑定到'ng-style'，因为它不是'md-tab'的已知属性。” – Jort

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

<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

来源

2017-03-05 12:13:03 Aravind

我使用了基于该ng-reflect-active属性设置为true其实解决方法时选择了选项卡，并添加上一个CSS样式：

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

它适用于现在使用角材料2.0.0-beta.3

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

来源

2017-04-20 08:28:08 qorsmond

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

回答

相关问题