选中时如何更改 p-tabPanel 名称

Question

在我的选项卡上，我过去的名字太大了。然后我为每个选项卡设置简称，但我想在选择时显示全名。

Answer 1

没有看到您的代码，很难找到适合您的解决方案。但是，我认为这应该能够帮助您从哪里开始。如果你有很多 header，这不是最有效的，但我认为这是一个很好的开始，可以帮助你。

我们可以使用 Angular 的 ng-template 元素和 primeng 的自定义模板 header 来创建两个使用 *ngIf 来决定何时显示多头或空头的元素 header。在我们的函数中使用带有 $event 的 (onChange) 事件，我们可以检测当前选项卡并使用它来将值传递给我们的 activeTab 变量。

下面我将 p-tabPanel 的默认索引设置为 0（我们的 activeTab.index 也设置为 0，因此默认情况下它会在第一个选项卡上显示长名称）一旦你改变tab/index。如果所选选项卡的 activeTab.index 等于 p-tabView 的 tabIndex，则应显示长选项卡 header。如果不相等，就显示较短的 header.

HTML:

<p-tabView (onChange)="switchHeaders($event);" [(activeIndex)]="tabIndex">
    <p-tabPanel>
        <ng-template pTemplate="header">
            <div *ngIf="activeTab!==0"><span>Shortname</span></div>
            <div *ngIf="activeTab===0"><span>Really long header name</span></div>
        </ng-template>
    </p-tabPanel>
    <p-tabPanel>
        <ng-template pTemplate="header">
            <div *ngIf="activeTab!==1"><span>Shortname2</span></div>
            <div *ngIf="activeTab===1"><span>Really long header name2</span></div>
        </ng-template>
    </p-tabPanel>
    <p-tabPanel>
        <ng-template pTemplate="header">
            <div *ngIf="activeTab!==2"><span>Shortname3</span></div>
            <div *ngIf="activeTab===2"><span>Really long header name3</span></div>
        </ng-template>
    </p-tabPanel>
</p-tabView>

TS:

tabIndex = 0;
activeTab = 0;

switchHeaders(tabNumber: any) {
  this.activeTab = tabNumber.index;
}

祝你好运！

选中时如何更改 p-tabPanel 名称

how to change p-tabPanel name when selected

primeng