Angular:如何在订阅模板之前通过管道传输 Observable

Question

免责声明:这与 this 密切相关问题。

目前我有两个组件，Parent 和 Child。Parent 将 Observable 传递给 Child，后者在模板中订阅此 Observable 以避免生命周期/内存泄漏问题。但是我必须通过 pipe Child 组件中的 Observable 来设置一些东西。

parent.ts:

public $obs = Observable<any>;
....
loadData() {
   this.obs$ = this.myService.getData();
}

parent.html:

<child [data$]="obs$"></child>

child.ts:

@Input() data$ : Observable<any>;

ngOnChanges(changes) {

  if(changes.data$) {
    console.log("changes detected");
    this.data$.pipe(tap(data => console.log("tap worked")));
  }
}

child.html

<div *ngIf="data$ | async as data;">
{{ data || json }}
</div>

数据存在于模板中，控制台日志显示已检测到更改，但从未显示“tap worked”，这让我怀疑我对 pipe 的调用可能来了为时已晚。有什么方法可以在模板“调用”订阅之前进行管道传输吗？

这个想法是有许多类似于子组件的组件，它们都对数据对象做不同的事情。我考虑过在 Parent 中订阅服务并将 json 值直接传递给所有子项，但这需要我在所有子项中写一个 *ngIf。

Answer 1

我建议您不要直接订阅data$。而是创建另一个您可以阅读的 Observable。

@Input() data$: Observable<any>;
customData$: Observable<any>;

ngOnChanges(changes) {
  if(changes.data$) {
    console.log("changes detected");
    this.customData$ = this.data$.pipe(tap(data => console.log("tap worked")));
  }
}

<div *ngIf="customData$ | async as data;">
  {{ data || json }}
</div>