iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Observable怎么在Angular中使用
  • 358
分享到

Observable怎么在Angular中使用

2023-06-14 09:06:12 358人浏览 八月长安
摘要

这期内容当中小编将会给大家带来有关Observable怎么在angular中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。可观察对象(Observable)可观察对象支持在应用的发布者和订阅者之间传递

这期内容当中小编将会给大家带来有关Observable怎么在angular中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

可观察对象(Observable)

可观察对象支持在应用的发布者和订阅者之间传递消息。

可观察对象是声明式的 —— 即定义的用于发布值的函数,在有消费者订阅它之前,这个函数不会实际执行。


可观察对象可能会发出的三种通知:

通知类型说明
next必要。用来处理每个送达值。在开始执行后可能执行零次或多次。
error可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。
complete可选。用来处理执行完毕(complete)通知。当执行完毕后,这些值就会继续传给下一个处理器。

定义观察者

观察者(observer): 用于接收可观察对象通知的处理器要实现 Observer 接口,这个对象定义了一些回调函数来处理可观察对象可能会发来的三种通知。
观察者对象可以定义这三种处理器的任意组合。如果你不为某种通知类型提供处理器,这个观察者就会忽略相应类型的通知。

// Create observer objectconst myObserver = {  next: (_data) => {  // next通知类型处理器  },  error: err => {  // error通知类型处理器  },  complete: () => console.log('Observer Got a complete notification'),};

订阅

只有当Observable的实例被订阅时,Observable实例才会发布值。订阅时要先调用该实例的subscribe() 方法,并把一个观察者对象传给它,用来接收通知。

语法:Observable.subscribe(ObserverObject),其中,Observable为可观察对象实例,ObserverObject为观察者对象。

// 官网示例// Create simple observable that emits three valuesconst myObservable = of(1, 2, 3);// Create observer objectconst myObserver = {  next: x => console.log('Observer got a next value: ' + x),  error: err => console.error('Observer got an error: ' + err),  complete: () => console.log('Observer got a complete notification'),};// Execute with the observer objectmyObservable.subscribe(myObserver);// Logs:// Observer got a next value: 1// Observer got a next value: 2// Observer got a next value: 3// Observer got a complete notification

另外,subscribe() 方法还可以接收定义在同一行中的回调函数,无论 next、error 还是 complete 处理器。比如,下面的 subscribe() 调用和前面指定预定义观察者的例子是等价的。

myObservable.subscribe(  x => console.log('Observer got a next value: ' + x),  err => console.error('Observer got an error: ' + err),  () => console.log('Observer got a complete notification'));

注: 无论哪种情况,next通知类型的处理器是必要的,而error和complete处理器是可选的。

subscribe() 调用会返回一个 Subscription 对象,该对象具有一个 unsubscribe()方法。 当调用该方法时,你就会停止接收通知。

上述就是小编为大家分享的Observable怎么在Angular中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。

--结束END--

本文标题: Observable怎么在Angular中使用

本文链接: https://www.lsjlt.com/news/269535.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Observable怎么在Angular中使用
    这期内容当中小编将会给大家带来有关Observable怎么在Angular中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。可观察对象(Observable)可观察对象支持在应用的发布者和订阅者之间传递...
    99+
    2023-06-14
  • Vue中observable是什么及怎么使用
    这篇文章主要介绍“Vue中observable是什么及怎么使用”,在日常操作中,相信很多人在Vue中observable是什么及怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue中observabl...
    99+
    2023-07-04
  • 怎么在Angular service中使用TemplateRef
    这篇“怎么在Angular service中使用TemplateRef”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获...
    99+
    2024-04-02
  • JavaScript中rxjs与Observable操作符怎么使用
    这篇文章主要讲解了“JavaScript中rxjs与Observable操作符怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中rxjs与Observable操作符...
    99+
    2023-07-02
  • Angular中的SSR怎么使用
    这篇文章主要介绍“Angular中的SSR怎么使用”,在日常操作中,相信很多人在Angular中的SSR怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular中的SSR怎么使用”的疑惑有所帮助!...
    99+
    2023-07-04
  • Angular中的NgModule怎么使用
    这篇“Angular中的NgModule怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这...
    99+
    2024-04-02
  • angular中怎么使用echarts地图
    这篇文章将为大家详细讲解有关angular中怎么使用echarts地图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的...
    99+
    2023-06-22
  • 怎么使用Angular cli
    本篇内容介绍了“怎么使用Angular cli”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. 什么是A...
    99+
    2024-04-02
  • Angular中Directive怎么用
    这篇文章主要介绍了Angular中Directive怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Angular Directive 学习学习目的:为了更好的了解 ng...
    99+
    2023-06-14
  • Angular中Renderer怎么用
    这篇文章主要介绍了Angular中Renderer怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Angular 其中的一个设计目标是使...
    99+
    2024-04-02
  • Angular中怎么添加和使用Font Awesome
    今天就跟大家聊聊有关Angular中怎么添加和使用Font Awesome,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Font AwesomeFo...
    99+
    2024-04-02
  • Angular中的material怎么安装与使用
    小编给大家分享一下Angular中的material怎么安装与使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、 Angular介绍Angular是谷歌开发的...
    99+
    2023-06-08
  • angular中的@Component装饰器怎么使用
    今天小编给大家分享一下angular中的@Component装饰器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收...
    99+
    2024-04-02
  • Angular怎么使用SASS样式
    这篇文章主要介绍了Angular怎么使用SASS样式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Angular怎么使用SASS样式文章都会有所收获,下面我们一起来看看吧。SASS 提供了两种编写的语法,一种是...
    99+
    2023-07-04
  • Angular中插槽怎么用
    这篇文章将为大家详细讲解有关Angular中插槽怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Angular插槽的使用使用ng-content 主要借助于select如果什么都不填直接使用<n...
    99+
    2023-06-14
  • angular中ui calendar怎么用
    这篇文章将为大家详细讲解有关angular中ui calendar怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。官方地址:http://angular-ui.git...
    99+
    2024-04-02
  • 怎么在Angular中利用模板输入变量
    这篇文章给大家介绍怎么在Angular中利用模板输入变量,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。@Component({  selector: 'nz-demo-pagina...
    99+
    2023-06-14
  • Angular的Directive指令怎么使用
    这篇文章主要介绍“Angular的Directive指令怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular的Directive指令怎么使用”文章能帮助大家解决问题。Directiv...
    99+
    2023-07-04
  • Angular中ng-zorro-antd怎么用
    这篇文章主要介绍了Angular中ng-zorro-antd怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、安装ng-zorro-a...
    99+
    2024-04-02
  • Angular独立组件怎么使用
    这篇文章主要介绍“Angular独立组件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular独立组件怎么使用”文章能帮助大家解决问题。在Angular 14中, 开发者可以尝试使用独...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作