Angular 带服务器端分页的Mat表-角度

我正在开发一个通用的mat表，在这里我们可以将数据传递给该表组件，该组件将向用户显示数据&应该处理服务器端分页

当从同一个表组件调用服务时，它工作正常

但是，当使用输出事件发射器在分页器更改时从表向父组件发送事件时，该事件应调用该方法，该方法应调用将获取下一页记录并将其传递给表组件的服务，用户将能够在其中看到下一组记录

表组件

 ngAfterViewInit(){
      merge(this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          const obj = {
            pageNumber: this.paginator.pageIndex,
            pageSize: this.paginator.pageSize,
          };
          this.pageEvent.emit(obj); --> emitting event using event emiiter

          return [];
        }),
        map((data) => {
          console.log(data);
          this.tableData = data;

          return data;
        }),
        catchError(() => {
          return observableOf([]);
        }),
        )
        .subscribe((data: any) => {

         });
       } 

应用程序同步HTML 提前谢谢

stackblitz:

---

角度的例子：

你能试着解释一下吗？您想监听另一个组件中的事件吗？@Max我能够监听表中的页面更改事件，并能够将数据传递给其他组件，使用接收到的数据，我将点击服务并获取数据，这些数据将再次发送回表组件，并用新数据更新表。最后它只是一个带有服务器端分页的mat表，其中表数据从另一个组件传递。你可以通过Stackbliz，提供的材料示例，你能试着更好地解释一下吗？您想监听另一个组件中的事件吗？@Max我能够监听表中的页面更改事件，并能够将数据传递给其他组件，使用接收到的数据，我将点击服务并获取数据，这些数据将再次发送回表组件，并用新数据更新表。最后它只是一个带有服务器端分页的mat表，其中表数据从另一个组件传递。U可以通过Stackbliz，提供的材料示例

<app-table [displayedColumns]="data" [tableData]="tableData" 
 (pageEvent)="paginator($event)"></app-table>

paginator(event)
      {
       console.log(event)
       this.pageCount=event.pageNumber+1;
       this.getData(this.pageCount)
      }