Angular 中的 Observables

Angular 使用 observables 作为一个接口来处理许多常见的异步操作。Observables 支持在 Angular 应用程序中共享发布者和订阅者之间的数据。

与事件处理、异步编程和 promises 等技术相比，它是一种更好的处理多个值的方法。

Observables 的一个特殊功能是它可以被订阅它的订阅者访问。定义了一个函数来发布值，但订阅的消费者不会执行它。一个 observable 一次可以提供任意数量的值。

在任何一种情况下，获取值的 API 都相同，并且设置和逻辑都由 observable 处理。最好的部分是仅订阅和取消订阅必要的信息。

例如

您必须定义自定义事件，这些事件从子组件向父组件发送 observable 输出数据。

HTTP 模块使用 observables 处理 AJAX 请求和响应。

路由器和表单模块使用 observables 来监听和响应用户输入事件。

组件之间的数据传输

Angular 提供了一个事件发射类，用于通过 @Output() 装饰器从组件发布值。事件发射器扩展了 RxJSSubject， 添加了一个 emit() 方法来发送任意值。当您调用 to emit() 时，它会将发射的值传递给任何已订阅观察者的 next() 方法。

这是一个监听打开和关闭事件的示例组件

以下是组件定义

HTTP

Angular 的 HttpClient 从 HTTP 方法调用返回 observable。

例如， http.get('/API) 返回一个 observable。它提供了优于基于 Promise 的 HTTP API 的几个优点

Observables 不会更改服务器响应。您可以根据需要使用一系列运算符来更改值。

• 可以通过 unsubscribe () 方法取消 HTTP 请求。
• 可以配置请求以接收进度事件更新。
• 可以轻松地重试失败的请求。

Async Pipe

AsyncPipe 订阅一个 observable 并返回它发出的最新值。当发出新值时，管道会标记要检查更改的组件。

以下示例将 observable 时间绑定到组件的视图。observable 使用当前时间更新视图。

路由器

路由器将事件作为 observables 提供。我们可以使用 RxJS 的 filter() 运算符来查找感兴趣的事件，并订阅它们以根据导航过程中的事件序列做出决策。下面是一个例子

路由器事件

动态路由是一个注入的路由器服务，它使用 observables 来获取有关路由路径和参数的信息。

例如，ActivatedRoute.url 有一个 observable，它报告一个或多个路由路径。

ActivatedRoute

响应式表单

反应式表单使用 observables 来监视表单控件值。FormControl 属性值更改和状态更改具有引发更改事件的 observables。

订阅 observable 表单控件属性 是在组件类中触发应用程序逻辑的一种方式。

错误处理

Observables 异步生成值，因此 try/catch 中没有错误，因为它可以在任何其他任务运行时停止代码。
相反，我们通过在观察者上指定一个错误回调来处理错误。一个 observable 既可以产生一个值（调用 next 回调），也可以调用 complete 或 error 回调。当发生错误时，它会清除 observable 订阅并停止生成该订阅值。

语法