Angular 5 + RxJS：在组件中使用可观察对象而不订阅它们

Question

我通常倾向于在组件中使用 Observables，方法是使用myFunction(myObservable$ | async)通过模板将它们传递给函数，并且效果很好。

但是，在我的模板中，我有一个 output function 向父组件发出值。

<my-component
   [myInput]="something$ | async"
   (childOutputEmitter)="onChildEmitFunction($event)">
</my-component>

问题是onChildEmitFunction() function 我需要结合发射值（$event）和myObservable$ | async myObservable$ | async值。

这似乎不起作用：

<my-component
   [myInput]="something$ | async"
   (childOutputEmitter)="onChildEmitFunction($event, (myObservable$ | async))">
</my-component>

有没有办法将 myObservable$ 的值传递给 onChildEmitFunction() 而不订阅它并将值存储在另一个变量中？

Answer 1

您可以使用*ngIf指令多次使用 observable 中的值。

<ng-container *ngIf="something$ | async as something">
  <my-component
     [myInput]="something"
     (childOutputEmitter)="onChildEmitFunction($event, something)">
  </my-component>
</ng-container>

另请注意，如果async pipe 与 HTTP 一起使用，则每个 pipe 都可以触发单独的请求。