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

Question

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

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

父.ts：

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

父.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>

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

这个想法是有许多类似于 child 的组件，都在数据对象上做不同的事情。我想过订阅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>

Answer 2

Observables 天生就是懒惰的。在您订阅它们之前，它们不会被执行。要查看“点击有效”，您需要订阅它。

this.data$.pipe(tap(data => console.log("tap worked"))).subscribe();

async 默认为您订阅和取消订阅 observable，还要注意 observable 中的每个订阅者都会获得一个新的执行上下文，并且可以覆盖此行为。

要缓存结果以防订阅延迟，您可以在服务中使用BehaviourSubject 或ReplaySubject。

Answer 3

我认为问题出在您的 ngOnChanges 中。你有条件

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

这将检查 data$ 的引用是否会改变，但不会检查 data$ 是否发出您真正想要的新值。因此，您的点击不会被执行。

你可以

 public data$: Observable<any>;
  @Input() set data(data$: Observable<any>) {
    this.data$ = data$.pipe(tap(x => console.log("tap worked")));
  }