如何在嵌套组件中只执行一次订阅 ngOnInit答案

【问题标题】：How to execute a subscription ngOnInit only one time in a nested component如何在嵌套组件中只执行一次订阅 ngOnInit
【发布时间】：2020-06-05 21:36:44
【问题描述】：

我有两个组件：CreateComment 和 DisplayComment。 DisplayComment 组件本身嵌套在其中，用于显示线程化的 cmets。

现在，每当我从 CreateComment 组件创建评论时，我都会调用 CommentService 中的主题来发出事件。此主题在 DisplayComment 组件中被订阅，我在其中将评论推送到要呈现的 cmets 数组。

由于我有嵌套组件，因此多次调用此订阅（根据线程 cmets 计数）。

谁能告诉我是否有任何方法可以将 DisplayComment 方法上的订阅执行限制为一次？

【问题讨论】：

标签： angular angular2-services subscription

【解决方案1】：

如果您需要订阅以完成一定数量的排放，您可以查看 RxJS take 运算符。

ngOnInit() {
  this.someService.someObservable.pipe(
    take(1)
  ).subscribe(
    response => {
      // do something
    }
  );
}

您还可以将参数增加到您希望在订阅完成之前发出的值的数量。对于take(1)，订阅将在发出一个值后完成。

还有一个 RxJS first() 运算符。有关take(1) 和first() 之间的区别，请参阅here。

【讨论】：

我通过使用 first() 和 take(1) 进行了检查，它仍在运行多次。这是因为，我已经在内部嵌套了 DisplayComment 组件，并且 ngOnInit 将为每个线程注释运行多次。因此，每次调用组件时，订阅也会执行多次。
在这种情况下，DisplayComment 不知道它的当前状态。您可以设置一个服务来保存它的值，在那里初始化和分配值。现在您可以在订阅和分配新值之前检查该值是否已经分配。
感谢您的想法。我通过传递整个 cmets 数组而不是创建的注释来在服务器本身中处理它。