如何在Angular TypeScript中通过上一页下一页按钮切换选中的tab

你当前使用的tabset组件（ngx-bootstrap的Tabs组件）原生支持状态控制，按以下两步修改即可实现按钮和Tab的状态完全同步：

1. 修改HTML模板 #

给tabset添加模板引用和切换事件监听，同时给按钮加禁用逻辑避免越界操作：

<div>
  <ng-container>
      <!-- 加模板引用和切换事件监听 -->
      <tabset #tabSet="tabset" (activeTabChange)="onTabChange($event)">
        <tab>
          <ng-template tabHeading>
            <span title="Flash mobile">Flash</span>
          </ng-template>
          <p> Flashing mobile </p>
        </tab>
        <tab>
          <ng-template tabHeading>
            <span title="Restore mobile">Restore</span>
          </ng-template>
          <p> Restore mobile </p>
        </tab>
      </tabset>
    </ng-container>
 </div>

<div>
<!-- 禁用逻辑：第一个tab时上一页不可点，最后一个tab时下一页不可点 -->
<button class="btn" (click)="updatePrev()" [disabled]="activeTabIndex === 0"> Previous </button>
<button class="btn" (click)="updateNext()" [disabled]="activeTabIndex === totalTabs - 1"> Next </button>
</div>

2. 编写TypeScript组件逻辑 #

首先确保你已在对应业务模块的imports数组中导入了TabsModule.forRoot()，再修改组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TabsetComponent } from 'ngx-bootstrap/tabs';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html'
})
export class TabDemoComponent implements AfterViewInit {
  // 获取tabset组件实例
  @ViewChild('tabSet') tabSet!: TabsetComponent;
  // 记录当前激活的tab索引
  activeTabIndex = 0;
  // 总tab数量
  totalTabs = 0;

  ngAfterViewInit(): void {
    // 动态获取tab总数，新增/删除tab时不用手动修改
    this.totalTabs = this.tabSet.tabs.length;
  }

  // 上一页逻辑
  updatePrev(): void {
    if (this.activeTabIndex <= 0) return;
    this.activeTabIndex--;
    // 修改对应tab的激活状态
    this.tabSet.tabs[this.activeTabIndex].active = true;
  }

  // 下一页逻辑
  updateNext(): void {
    if (this.activeTabIndex >= this.totalTabs - 1) return;
    this.activeTabIndex++;
    this.tabSet.tabs[this.activeTabIndex].active = true;
  }

  // 同步用户直接点击tab头部的状态
  onTabChange(event: any): void {
    this.activeTabIndex = this.tabSet.tabs.findIndex(tab => tab === event.tab);
  }
}

以上方案可以保证不管是点击上下按钮，还是直接点击tab头部切换，按钮状态和tab激活状态都会完全同步。如果使用的是其他UI库的tab组件，核心逻辑通用，仅需要替换对应组件的实例引用和激活属性即可。

内容的提问来源于stack exchange，提问作者Aishwarya royal