Angular 4标签页分页重置问题：仅首个标签页生效

你遇到的问题核心在于没有区分当前活跃标签页对应的分页组件实例，导致重置操作只作用在了第一个分页组件上。下面结合ngx-bootstrap的Tabs和Pagination组件特性，给你具体的实现方案：

方案一：通过ViewChildren+标签页索引定位当前分页组件 #

这个方案适合标签页数量固定的场景，步骤如下：

1. 模板层设置引用变量与标签页切换事件 #

给每个分页组件设置独立的模板引用（也可以不设，因为ViewChildren会根据组件类型获取所有实例），同时监听标签页的切换事件来记录当前活跃标签页的索引：

<tabset (activeTabChange)="onActiveTabChanged($event)">
  <tab heading="标签页1" id="tab1">
    <!-- 你的表格内容 -->
    <pagination [(ngModel)]="page1" [totalItems]="total1"></pagination>
  </tab>
  <tab heading="标签页2" id="tab2">
    <!-- 你的表格内容 -->
    <pagination [(ngModel)]="page2" [totalItems]="total2"></pagination>
  </tab>
</tabset>

<button class="btn btn-primary" (click)="resetCurrentPage()">重置页码到第1页</button>

2. 组件层获取分页实例并处理重置逻辑 #

在组件类中，用ViewChildren获取所有PaginationComponent实例，同时记录当前活跃标签页的索引，重置时根据索引定位到对应的分页组件：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { PaginationComponent } from 'ngx-bootstrap/pagination';
import { TabDirective } from 'ngx-bootstrap/tabs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 分页双向绑定变量
  page1 = 1;
  page2 = 1;
  total1 = 100;
  total2 = 80;

  // 获取所有分页组件实例
  @ViewChildren(PaginationComponent) paginationList!: QueryList<PaginationComponent>;
  // 当前活跃标签页的索引
  activeTabIndex = 0;

  // 监听标签页切换，更新当前索引
  onActiveTabChanged(event: TabDirective) {
    // 根据tab的id或者heading来判断索引，这里用id更可靠
    this.activeTabIndex = event.id === 'tab1' ? 0 : 1;
  }

  // 重置当前标签页的页码
  resetCurrentPage() {
    // 从实例列表中获取当前活跃标签页对应的分页组件
    const targetPagination = this.paginationList.toArray()[this.activeTabIndex];
    if (targetPagination) {
      // 调用ngx-bootstrap分页组件的changePage方法直接跳转到第1页
      targetPagination.changePage(1);
      // 或者也可以直接更新双向绑定的page变量：
      // this.activeTabIndex === 0 ? this.page1 = 1 : this.page2 = 1;
    }
  }
}

方案二：通过模板引用变量直接定位（适合标签页少的场景） #

如果你的标签页数量很少（比如只有2个），也可以直接给每个分页组件设置独立的模板引用变量，然后根据活跃标签页直接操作对应的实例：

模板层： #

<tabset (activeTabChange)="onActiveTabChanged($event)">
  <tab heading="标签页1" id="tab1">
    <pagination #pagination1 [(ngModel)]="page1" [totalItems]="total1"></pagination>
  </tab>
  <tab heading="标签页2" id="tab2">
    <pagination #pagination2 [(ngModel)]="page2" [totalItems]="total2"></pagination>
  </tab>
</tabset>

组件层： #

import { Component, ViewChild } from '@angular/core';
import { PaginationComponent } from 'ngx-bootstrap/pagination';
import { TabDirective } from 'ngx-bootstrap/tabs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  page1 = 1;
  page2 = 1;
  total1 = 100;
  total2 = 80;

  @ViewChild('pagination1') pagination1!: PaginationComponent;
  @ViewChild('pagination2') pagination2!: PaginationComponent;
  activeTabId = 'tab1';

  onActiveTabChanged(event: TabDirective) {
    this.activeTabId = event.id;
  }

  resetCurrentPage() {
    if (this.activeTabId === 'tab1') {
      this.pagination1.changePage(1);
      // 或者 this.page1 = 1;
    } else {
      this.pagination2.changePage(1);
      // 或者 this.page2 = 1;
    }
  }
}

关键注意点 #

1. 确保ViewChildren/ViewChild在组件初始化完成后能获取到实例（如果是异步加载的内容，可能需要用setTimeout或者ngAfterViewInit钩子处理）；
2. 调用changePage方法是ngx-bootstrap分页组件的官方API，比直接修改双向绑定变量更可靠，因为它会触发组件内部的分页逻辑（比如页码边界校验）；
3. 标签页的切换事件一定要正确记录当前活跃的标签页标识（id/索引/heading），避免定位错误。

如果以上方案还是无法解决问题，你可以检查一下分页组件的ngModel绑定是否正确，或者标签页的内容是否是延迟加载的（如果是延迟加载，需要确保分页组件实例已经被初始化）。

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