如何在 Angular 2+ 模板中删除/销毁 observable

Question

我在 Angular 4 组件中有一个 observable（或主题），我在模板中使用它和 async 管道，如下所示：

<div *ngIf="(orderObservable | async) as order; else noOrder ">
    The active order was created at {{ order.created_at }}
</div>
<ng-template #noOrder>
    There is no active order at the moment. Sorry. 
</ng-template>

只要订单不存在或通过 HTTP 调用检索，这就像一个魅力。在代码中，这看起来像这样：

this.orderObservable = OrderService.getActive();

如果此调用返回一个带有订单的可观察对象，它将显示在模板中。如果没有，则显示 #noOrder 模板。

现在我的问题是：如果我将 observable 更改为主题，并且当前活动的订单不再存在（即因为它已提交或关闭），有没有办法删除主题，或将某些内容传递给主题，所以模板显示 #noOrder 模板而不是显示可观察内容的模板，在它已经显示后者之后？

Answer 1

Subject 是一个Observable，所以它的工作原理是一样的。你只需要调用complete() 告诉模板没有更多数据来，因此触发 else 条件。

this.subject = new Subject();
if(data) {
     this.subject.next(data);
}
this.subject.complete();

在上面的例子中，complete() 总是被调用。当您不尝试流式传输一系列项目时，这是一个很好的做法。该示例仅在值存在时才发出值。

注意：如果此时没有订阅者 next 被调用。没有人会收到数据。如果您知道模板将在您调用 next 后呈现，您可能想改用 ReplaySubject。发出最后的第 n 个项目。