重命名 p-tabview 中的选项卡

Question

我创建了一个 p-tabview，每个选项卡都包含一些内容，使用：

<p-tabView class="tabmain"  >
    <ng-container *ngFor="let tab of tabs">
        <p-tabPanel [header]="tab.header" >
           <p-table 
....

我打算提供一个使用模型来重命名选项卡中的选项卡header。我可以想到 2 个选项：

在带有重命名菜单选项的选项卡上提供上下文菜单（单击鼠标右键），单击该选项卡将打开一些对话框以输入新选项卡名称。
在选项卡文本旁边提供一个 rightIcon，就像一个编辑图标，点击它应该会再次打开一些对话框，要求用户输入新名称。

问题是为 p-tabview 提供的上述 2 个选项我没有看到任何 material。我怀疑 p-tabview 是否支持这种功能？如果是，请提出实现方式。

Answer 1

您可以创建一个自定义选项卡 header 并添加一个按钮以显示对话框以重命名 header ，在此示例中我使用 object 的数组表示选项卡 header 和内容

<p-tabView>
    <p-tabPanel *ngFor="let tab of tabs">
        <ng-template pTemplate="header">
            <label for="">{{tab.header}} </label>
            <button pButton type="button" icon="pi pi-pencil" 
             class="p-button-help" (click)="showDialog(tab)"></button>
        </ng-template>
        {{tab.content}}
    </p-tabPanel>
</p-tabView>

对话框只有一个用于更改标题的文本框

<p-dialog header="Update tab title" [(visible)]="display">
    <div>
        <label for="Title"></label>
        <input type="text" [(ngModel)]="selectedItem.header">
    </div>
</p-dialog>

组件

  tabs = [
    {
      header: "header1",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ....... "
    },
   ...
  ];

  display = false; // dialog visible state
  selectedItem :any= {}; // holder for tab object

  showDialog(selectedItem) :void {
    this.selectedItem = selectedItem; // set the current tab object
    this.display = true; // trigger the dialog visibility 
  }

demo

重命名 p-tabview 中的选项卡

Rename a tab in p-tabview

css

typescript

primeng

angular

primeng-turbotable