PrimeNg 选项卡视图选项卡选择

Question

在 prime ng 的 tabview 文档的可关闭部分中，我看到当我删除最后一个选项卡时，它会转到第一个选项卡。我的问题是：如何让它转到左侧的选项卡而不是第一个选项卡？ （我猜测是tabIndex取值为0和-1的情况）。更改 TabIndex 值时，有没有办法将选项卡放在关闭选项卡的左侧而不是第一个选项卡？ （ 示例行为应如下所示：设置选项卡 1、2 和 3。当我关闭 3 号选项卡时，我希望显示 2 号选项卡）。预先感谢。

我想做同样的事情，但我不知道它实际上是如何工作的？

这是我的一些源代码：

<div  style="float: left;" [style.width] ="this.splitWindows ? '50%' : '100%'">
                  <p-tabView  (onClose)="handleCloseLeft($event)" [scrollable]="isScrollable" (click)="consolelog(activeTabIndex)" (onChange)="handleOnChange($event)" [(activeIndex)]="activeTabIndex"] >
                    <p-tabPanel *ngFor="let item of leftTabItems; let i = index" [selected]="i == activeTabIndex"  [closable] = "item.closable">
                      <ng-template pTemplate="header">
                        <div #tabPanelRightClick>
                          {{item.header}}
                        </div>
                        <p-contextMenu appendTo="body" [target]="tabPanelRightClick" [model]="items"></p-contextMenu>
                      </ng-template>
                      <ng-content *ngComponentOutlet='item.component.component; inputs:item.params'/>
                    </p-tabPanel>
                  </p-tabView>
                </div>

活动选项卡索引采用 0,1,2,3,4.. 等值，我期望的行为是，当第 4 个 activeTabIndex 关闭时，第 3 个 activeTabIndex 出现在屏幕上，但它似乎转到了第 0 个我的主页所在的索引。 （不管是什么索引，它的工作原理如下。）

这是HandleCloseLeft的代码：

handleCloseLeft(event): void {
this.tabService.removeTabItem(event.index);

console.log("event index'i  : " + event.index);
console.log(this.leftTabItems.length);
// this.activeTabIndex = 0;
if (event.index < this.leftTabItems.length) {
   this.activeTabIndex = event.index;
 } else {
   this.activeTabIndex = this.leftTabItems.length - 1;
 }

this.leftTabItems.splice(event.index, 1);

// if(event.index > this.activeIndex) {
//   this.activeIndex = event.index - 1;
// }

}

Answer 1

prime-ng 中存在一些错误，如果我们更改活动索引，它不会以编程方式更新当前选项卡。

您可以在他们的 github 上提出错误来修复它。作为临时解决方法，请使用以下解决方案！请仔细阅读下面的 stackblitz，如有任何疑问请告诉我！

ts

import { Component, ViewChild } from '@angular/core';
import { TabView } from 'primeng/tabview';

@Component({
  selector: 'tab-view-closable-demo',
  templateUrl: './tab-view-closable-demo.html',
})
export class TabViewClosableDemo {
  @ViewChild('tabView') tabView: TabView;
  activeTabIndex = 0;
  tabArray = [1, 2, 3, 4, 5];

  handleCloseLeft(event: any) {
    console.log(event);
    this.tabArray.splice(event.index, 1);
    this.activeTabIndex = this.tabArray.length - 1;
    this.tabView.cd.detectChanges(); // = this.activeTabIndex;
  }
}

html

<div class="card">
  <p-tabView
    #tabView
    id="closableTabView"
    (onClose)="handleCloseLeft($event)"
    [(activeIndex)]="activeTabIndex"
  >
    <p-tabPanel
      header="Header I"
      [selected]="first"
      *ngFor="let tab of tabArray; let i = $index;let  first = $first"
      [closable]="true"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </p-tabPanel>
  </p-tabView>
</div>

堆栈闪电战