Question

我正在使用angular2 / 4和材料

http://material.angular.io/guide/getting-started

我的问题是，我希望标签文字的颜色在我点击后立即更改。

[ngStyle]似乎无法动态显示选项卡。我想在单击选项卡上的文本时自定义选项卡中文本的颜色，但没有任何变化！我怎么能绕过这个？

注意：我注意到如果我单击一个按钮以路由到我的应用程序的另一个页面，然后单击另一个按钮返回带有mat-tabs的页面，我看到文本的颜色已更改。

后端变量似乎正在变量“listoftabs”中更新，但文本颜色不会随时更改，除非您以某种方式重新呈现标签。

有解决方法吗？

打字稿：

thetab = {isYellow: false, tabname: 'Hello'}

changecolor(tabclicked) {
    tabclicked.isYellow = !tabclicked.isYellow;
}

TEMPLATE

            <mat-tab-group>
                <mat-tab>
                    <ng-template mat-tab-label>
                        <a (click)="changecolor()"><span [style.color]="thetab.isYellow ? 'yellow' : 'red'">Text I Want to Change Color</span> {{thetab.tabname}}</a>
                    </ng-template>
                    <div>
                    Tab Content Here           
                    </div>
                </mat-tab>
           </mat-tab-group>

Answer 1

您可以使用（selectedTabChange）事件来判断选项卡何时更改，并在标签中的标签上设置样式。参见StackBlitz的工作。

StackBlitz example

如何在单击时动态更改材质angular2选项卡上的文本颜色？

1 个答案: