@angular/cdk/collections DataSource<T> 的断开连接方法没有被调用

Question

当我离开已经初始化它的页面时，自定义数据源的断开连接方法没有被调用。

我开发了自定义数据源，因此我可以使用 table 进行服务器排序和分页。

一切正常，在我的页面 ngOnInit 方法中使用新的 CustomDataSource() 初始化自定义数据源 class 时调用连接方法，但是当我离开页面时，断开连接方法，应该清理用过的科目，不叫。

class SomeComponent implements OnInit, OnChanges, AfterViewInit {
  ngOnInit(): void {
     this.dataSource = new CustomDataSource(this.logService, 
     this.mensagemService);
  }
}

class ProcessosLogsDataSource implements DataSource<LogModel> {
  private logsSubject = new BehaviorSubject<LogModel[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);
  private lengthSubject = new BehaviorSubject<number>(0);
  public loading$ = this.loadingSubject.asObservable();
  public length$ = this.lengthSubject.asObservable();

  constructor(
      private logService: LogService,
      private mensagemService: MensagemService) { }

  connect(collectionViewer: CollectionViewer): Observable<ProcessoLogModel[]> { // is being called when the dataSource is being initialized in the SomeComponent ngOnInit method
      return this.logsSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {// not being called
      this.logsSubject.complete();
      this.loadingSubject.complete();
      this.lengthSubject.complete();
  }
}

Answer 1

在@Maryannah 的帮助下，我可以在 ngOnDestroy 中调用 disconnect 方法，我在代码中唯一需要更改的是在我的组件中调用 ngOnDestroy 并使用 @ViewChild 装饰器公开 MatTable 组件。

@ViewChild(MatTable, {static: false}) table: MatTable<LogModel>;

ngOnDestroy(): void {
  this.dataSource.disconnect(this.table);
}

Answer 2

如果您 "extend" 数据源 class，而不是使用 "implements"，将自动调用断开连接方法。

class ProcessosLogsDataSource extends DataSource<LogModel> { ... }

@angular/cdk/collections DataSource<T> 的断开连接方法没有被调用

The disconnect method of @angular/cdk/collections DataSource<T> is not being called

datasource

angular

angular-cdk