如何为Kendo UI for Angular TabStrip第二个标签添加自定义类？

直接给<kendo-tabstrip-tab>添加class或[ngClass]不会生效，因为该组件的宿主元素并非页面上显示的标签按钮，组件内部会独立渲染标签头的DOM结构，类名无法自动传递到目标元素。以下是两种可行的解决方法：

方案一：使用官方cssClass输入属性（最简单） #

Kendo TabStripTab组件提供了cssClass属性，可直接将类名应用到标签头元素上：

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
    <kendo-tabstrip-tab title="Paris" [selected]="true">
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png"/>
                <h2>17<span>ºC</span></h2>
                <span>Rainy weather in Paris.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>

    <!-- 为纽约标签添加自定义类 -->
    <kendo-tabstrip-tab title="New York City" cssClass="custom-nyc-tab">
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/cloudy.png"/>
                <h2>19<span>ºC</span></h2>
                <span>Cloudy weather in New York City.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

在样式文件中定义类样式：

.custom-nyc-tab {
    background-color: #e3f2fd;
    font-weight: 600;
    color: #1976d2;
}

方案二：自定义标签模板（支持动态条件类） #

如果需要根据动态条件（比如标签选中状态）添加类，可以使用kendoTabTitle模板自定义标签内容，在模板元素上应用[ngClass]：

1. 组件类中添加状态变量和事件处理 #

import { Component } from '@angular/core';

@Component({
    selector: 'app-tabstrip',
    templateUrl: './tabstrip.component.html',
    styleUrls: ['./tabstrip.component.css']
})
export class TabstripComponent {
    activeTabTitle: string = 'Paris';

    onTabSelect(event: { title: string }) {
        this.activeTabTitle = event.title;
    }
}

2. 模板中自定义标签头并应用[ngClass] #

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
    <kendo-tabstrip-tab [selected]="activeTabTitle === 'Paris'">
        <ng-template kendoTabTitle>
            <span [ngClass]="{'active-tab': activeTabTitle === 'Paris'}">Paris</span>
        </ng-template>
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png"/>
                <h2>17<span>ºC</span></h2>
                <span>Rainy weather in Paris.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>

    <kendo-tabstrip-tab>
        <ng-template kendoTabTitle>
            <!-- 根据条件动态添加类 -->
            <span [ngClass]="{
                'custom-nyc-tab': true,
                'active-tab': activeTabTitle === 'New York City'
            }">New York City</span>
        </ng-template>
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/cloudy.png"/>
                <h2>19<span>ºC</span></h2>
                <span>Cloudy weather in New York City.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

3. 样式文件中定义类 #

.custom-nyc-tab {
    color: #1976d2;
}

.active-tab {
    font-weight: bold;
    border-bottom: 2px solid #1976d2;
}

内容的提问来源于stack exchange，提问作者Anjali Patel