如何以角度同步两个独立的p分页器？

Question

我正在为此苦苦挣扎。我的角度组件中有两个独立的 p-paginator 组件。我想让它们彼此同步。因此，如果我点击其中任何一个，另一个也应该更新。

当用户更改另一个分页器时，我尝试触发分页器（尚未更改）的changePage()事件，反之亦然，希望使它们同步，但这并没有很好地结束，因为它形成了无限循环。

任何有关的帮助将不胜感激。谢谢

@ViewChild('paginatorTop', { static: true }) paginatorTop: Paginator;
@ViewChild('paginatorBottom', { static: true }) paginatorBottom: Paginator;

onTopPageChange(e) {
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }
  onBottomPageChange(e) {
    this.paginatorTop.changePage(e.page);
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }

<!-- paginator 1 -->
<p-paginator #paginatorTop [rows]="perRow" showCurrentPageReport="true"
          currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onTopPageChange($event)"
          [totalRecords]="total" styleClass="pr-0">
        </p-paginator>
        
        
        
<!-- Dynamic data coming from an API -->
        
        
<p-paginator #paginatorBottom [rows]="perRow" showCurrentPageReport="true"
      currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onBottomPageChange($event)"
      [totalRecords]="total" styleClass="pr-0">
    </p-paginator>

Answer 1

用 1 个执行此操作的函数替换 2 个函数

  onPageChange(e) {
    this.paginatorTop.changePage(e.page);
    this.paginatorBottom.changePage(e.page);
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }

Answer 2

为了避免无限循环和两次调用 API，我就是这样做的：

  currentPage = 0; //Manage current page, start with 0
  pageChange(event: any) {
    if(this.currentPage === event.page) return; //If the page didn't change do nothing
    this.currentPage = event.page ;
    // If paginatorTop still on different page , change it :
    if(this.paginatorTop?.getPage() !== event.page){
      this.paginatorTop.changePage(event.page);
    }

    // If paginatorBottom still on different page , change it :
    if(this.paginatorBottom?.getPage() !== event.page) {
      this.paginatorBottom.changePage(event.page);
    }
    //Call your API Once
    
  }

这只会更新