在命令性应用中，事件触发事件处理程序，这些处理程序是命令性代码的容器。不幸的是，这似乎是 Angular 应用程序中最常见的方法。典型的应用可能具有如下功能：

  navigateBack() {
    this.store.deleteMovies();
    this.store.switchFlag(false);
    this.router.navigate(['/']);
  }

该事件回调控制 3 个状态：，以及应用的 URL。store.moviesstore.flag

这不是很好的关注点分离，因为控制 whatandare 的逻辑分散在许多回调中，例如，要理解为什么任何事物在给定时间都是这样，您必须引用代码库中的许多位置。基本上，您需要“查找所有参考”，这可能会变得非常烦人。store.flagstore.moviesnavigateBack

因此，摆脱事件处理程序/回调似乎是开始重构以获得更多反应性的好地方。

反应式版本会是什么样子？

反应性的简单规则是：模板中的每个用户事件都将最小的更改推送到 TypeScript 中的单个位置，然后其他所有内容都会对此做出反应。这是一张图表：

如您所见，控制每个状态片段的逻辑已移动到它控制的状态旁边。这样可以更轻松地避免错误，因为我们在编写新逻辑来控制状态时可以轻松引用类似的逻辑。

反应式实现

现在的问题是如何在代码中实现这一点。

首先，假设我们创建一个主题来表示对后退按钮的点击：

backClick$ = new Subject<void>();

现在我们有一个可观察量，我们如何处理命令式点击处理程序中的所有这些方法？

标签：Angular,路由器,代码,参考
来源：