重命名 p-tabview 中的选项卡

Posted 2023-03-13

【中文标题】重命名 p-tabview 中的选项卡

【英文标题】：Rename a tab in p-tabview

【发布时间】：2020-11-30 00:01:16

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

<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 ?

【讨论】：

感谢您如此详尽而有效的解释。我试过了，它奏效了。除了，我的黑暗主题有一些问题，铅笔图标完全不可见。但这是一个不同的问题。只是出于好奇，第 1 点中提到的上下文菜单实现是否也可以在 p-tabview 中实现？

不客气，对于我尝试不做的菜单，但我没有找到选择的选项卡，所以我得到了答案中提到的那种方式，这只是一个简单的方式