标签：Angular 路由器 代码 参考

在命令性应用中，事件触发事件处理程序，这些处理程序是命令性代码的容器。不幸的是，这似乎是 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,路由器,代码,参考
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。