Angular Signals：无需取消订阅的 api 调用

Question

我很困惑是否可以在 Init 组件上进行 api 调用，并且每次当父级从子级（分页组件）获取事件时，使用新的 pageSize 和 pageNumber 调用 api 并分配此数据。主要问题是我想避免手动取消订阅和效果（因为不建议使用它来更改状态）。也许此时没有其他取消订阅的选项。我的下一个问题是，是否更建议使用模型而不是输入和输出信号？

子组件 ts

  rows = input.required<number>();
  pageChanged = output<number>();
  onPageChange(event: PaginatorState) {
    this.pageChanged.emit(event.rows!);
  }

父组件html

<app-paginator
  [rows]="pageSize()"
  (pageChanged)="onPageChange($event)"
  [totalRecords]="dataResponse()?.totalElements || 0"
  [(paginationData)]="pagination"
  [rowsPerPageOptions]="allowedNumbersOfRecordOnOnePage"></app-paginator>

父组件ts

    pageNumber = signal<number>(0);
      pageSize = signal<number>(100);
    //apiService.getData(arg1,arg2) return observable
 dataResponse= toSignal(
    this.apiService.getData(this.pageNumber(), this.pageSize())
  );

  onPageChange(pageSize: number) {
    this.pageSize.set(pageSize);
// How to set data to dataResponse reactively to signal without manually unsubscribe?
    
  }

Answer 1

当您需要两种方式的数据绑定时，您可以使用模型，如果是一种方式的数据绑定，请使用

input

。

这里的模型更好，因为当子项更改时您触发 API，当父项更新值时您也需要更新子项。

<app-paginator
  [(rows)]="pageSize()"
  (pageChanged)="onPageChange($event)"
  [totalRecords]="dataResponse()?.totalElements || 0"
  [(paginationData)]="pagination"
  [rowsPerPageOptions]="allowedNumbersOfRecordOnOnePage"></app-paginator>

更新孩子有一个模型。

rows = model<number>();

onPageChange(event: PaginatorState) {
  this.rows.set(event.rows!);
}

现在您可以使用

computed

对更改做出反应。我们将

computed

包裹在

toSignal

内，这样您就无需处理取消订阅的问题。

pageNumber = signal<number>(0);
pageSize = signal<number>(100);
//apiService.getData(arg1,arg2) return observable
dataResponse = toSignal(computed(() => 
    this.apiService.getData(this.pageNumber(), this.pageSize()))());

onPageChange(pageSize: number) {
  this.pageSize.set(pageSize);
  // How to set data to dataResponse reactively to signal without manually unsubscribe?
}