如何在ngx引导选项卡集中显示上一个活动选项卡

在ngx引导选项卡中，要实现集中显示上一个活动选项卡，可以通过以下步骤进行操作：

1. 首先，确保已经安装并引入了ngx-bootstrap库，该库提供了一组丰富的Bootstrap组件，包括选项卡组件。
2. 在HTML模板中，使用ngx-bootstrap的选项卡组件来创建选项卡。例如，可以使用<tabset>标签创建一个选项卡组，并在其中使用<tab>标签创建各个选项卡。
3. 在组件的Typescript文件中，定义一个变量来存储上一个活动选项卡的索引。例如，可以使用activeTabIndex变量来存储索引值。
4. 在选项卡组件的ngOnInit生命周期钩子函数中，初始化activeTabIndex变量为默认的活动选项卡索引。
5. 在选项卡组件的HTML模板中，使用[activeId]属性来绑定活动选项卡的索引。将activeTabIndex变量作为属性值传递给[activeId]属性。
6. 在选项卡组件的HTML模板中，使用(tabChange)事件来监听选项卡的切换。在事件处理函数中，更新activeTabIndex变量为当前活动选项卡的索引。
7. 在选项卡组件的CSS样式中，使用Flex布局或其他布局方式来实现选项卡的集中显示。可以使用justify-content: center;属性来水平居中选项卡。

下面是一个示例代码：

HTML模板：

<tabset [activeId]="activeTabIndex" (tabChange)="onTabChange($event)">
  <tab heading="选项卡1">选项卡1的内容</tab>
  <tab heading="选项卡2">选项卡2的内容</tab>
  <tab heading="选项卡3">选项卡3的内容</tab>
</tabset>

Typescript文件：

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

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
  activeTabIndex: number = 0;

  onTabChange(event: any) {
    this.activeTabIndex = event.activeId;
  }
}

CSS样式：

.tabset {
  display: flex;
  justify-content: center;
}

这样，当用户切换选项卡时，上一个活动选项卡会被集中显示在ngx引导选项卡中。