[Angular 基础] - Observable

[Angular 基础] - Observable

之前的笔记：

  • [Angular 基础] - service 服务
  • [Angular 基础] - routing 路由(上)
  • [Angular 基础] - routing 路由(下)

我以前对 Observable 的理解是 Promise 的一个超集，重新了解了一下，感觉这个说法不太对。更准确一些的说法应该是 stream of events，只不过大多数情况下，这个 events 是一个 Promise 而已。比如说 routes 的变化不属于 Promise，但是它是一个 event，也就自然可以被放到 Observable 里面去进行监听。

大多数 rxjs 相关的内容都在 rxjs 的 observable 里面说过了，这里主要记一些 angular 相关的知识，之后有需求的话继续拓展

先简单的说明一下项目结构：

❯ tree src/app/
src/app/
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
├── home
│   ├── home.component.css
│   ├── home.component.html
│   └── home.component.ts
└── user├── user.component.css├── user.component.html└── user.component.ts3 directories, 11 files

路由的配置如下：

const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'user/:id', component: UserComponent },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],
})
export class AppRoutingModule {}

简单来说，项目总共有两个路径，默认路径渲染 Home 组件，user/:id 路径渲染 User 组件

使用 observable

这里的变化会在 HomeComponent 中实现：

@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {constructor() {}ngOnInit() {interval(1000).subscribe((count) => {console.log(count);});}
}

其中，interval 是 rxjs 提供的一个 observable：

export declare function interval(period?: number,scheduler?: SchedulerLike
): Observable<number>;

这个函数会在每个周期输出一个数字 (counter)，效果如下：

在这里插入图片描述

需要注意这里有一个问题——当页面离开 Home 时，log 并没有停止。而是会持续输出。这个原因是因为这是一个 custom observable，它的创建和终结并不由 Angular 进行控制。因此如果不在 NgOnDestroy 中销毁，它就会一直 log 下去

最糟糕的情况是，如果当前组件被重复创建/毁灭多次，那么同一个组件就会有多个 observable 一起运行：

在这里插入图片描述

解决方法如下：

export class HomeComponent implements OnInit, OnDestroy {private intervalSub: Subscription;constructor() {}ngOnInit() {this.intervalSub = interval(1000).subscribe((count) => {console.log(count);});}ngOnDestroy(): void {this.intervalSub.unsubscribe();}
}

效果如下：

在这里插入图片描述

可以看到，当切换到其他页面的时候，log 的输出停止了，而从其他页面回来的时候，subscription 中的输出被清零了

👀：subscribe 中的就是 observer，它主要的目的就是用来提供 Observable 中，对下一步操作的处理，包括 next, error 和 complete

创建 observable

这里会创建一个新的 observable：

export class HomeComponent implements OnInit, OnDestroy {private intervalSub: Subscription;constructor() {}ngOnInit() {const customIntervalObservable = new Observable((observer) => {let count = 0;setInterval(() => {observer.next(++count);console.log(customIntervalObservable);}, 1000);});this.intervalSub = customIntervalObservable.subscribe((data) => {console.log(data);});}ngOnDestroy(): void {this.intervalSub.unsubscribe();}
}

实现效果如下：

在这里插入图片描述

可以看到，实现方面基本上没什么变化

error

报错也是一个常见的情况，observable 这里对于报错的处理也很简单，如下：

const customIntervalObservable = new Observable((observer) => {let count = 0;setInterval(() => {observer.next(++count);if (count > 3) {observer.error('count is greater than 3');}}, 1000);
});

效果如下：

在这里插入图片描述

可以看到，一旦报错后，observable 就会被取消。在 subscription 处理报错方法如下：

this.intervalSub = customIntervalObservable.subscribe((data) => {console.log(data);},(error) => {console.error(error);}
);

效果如下：

在这里插入图片描述

complete

因为 observable 是一个 stream of events，所以它也有提供对于 events 终止的处理，也即是 complete：

const customIntervalObservable = new Observable((observer) => {let count = 0;setInterval(() => {observer.next(++count);if (count === 2) {observer.complete();}if (count > 3) {observer.error('count is greater than 3');}}, 1000);
});this.intervalSub = customIntervalObservable.subscribe((data) => {console.log(data);},(error) => {console.error(error);},() => {console.log('%c' + 'Observable completes.', 'color: #198754; ');}
);

效果如下：

在这里插入图片描述

⚠️：如果在 complete 之前 subscription 就遇到报错，那么 complete 状态不会被触发

operators

先前的笔记有提到过，rxjs 说自己是 observable 版本的 lodash，其中一个原因就是 rxjs 提供了相当丰富的 operators，这样操作 observables 变得更加简单——虽然所有功能都是可以写在 observer 中进行实现的，不过 rxjs 提供的了很多开箱即用的 operators，可以极大地简化操作

pipe 的用处在于可以接受多个 operators，并合并成一个 operators。这样 operator 就可以承接上一个 observable 的返回值，对其进行修改，并 emit 到一个 新的 observable 中。这代表通过 pipe 对数据进行操作，并不会修改上一个 observable 中的值。

map

这里使用 map 做一个案例，修改的代码如下：

const customIntervalObservable = new Observable((observer) => {let count = 0;setInterval(() => {observer.next(++count);}, 1000);
});const pipedObservable = customIntervalObservable.pipe(map((data: number) => {console.log('%c' + 'Round: ' + (data + 1), 'color: #0d6efd; ');return data + 1;})
);customIntervalObservable.subscribe((data) => {console.log('%c' + data, 'color: #198754; ');
});pipedObservable.subscribe((data) => {console.log('%c' + data, 'color: #bada55; background-color: #222;');
});

输出结果为：

在这里插入图片描述

可以看到：

  • 原本的 observable ——即绿色字体的 observable——其 conter 从 1 开始输出
  • 通过 pipe，并使用 map 进行操作的 observable——即黄色字体的 observable——其 conter 从 2 开始输出

这也说明了通过 pipe 的 operator 对数据操作，并不会 修改上一个 observable 的值

filter

修改如下：

const customIntervalObservable = new Observable((observer) => {let count = 0;setInterval(() => {observer.next(++count);}, 1000);
});const pipedObservable = customIntervalObservable.pipe(filter((data: number) => {return data % 2 === 0;}),map((data: number) => {return 'Round: ' + (data + 1);})
);pipedObservable.subscribe((data) => {console.log('%c' + data,'color: #bada55; background-color: #222; padding: 5px;');
});

其中：

  • filter 过滤掉所有的偶数值
  • map 只是单纯返回会被 log 的字符串

最终运行结果为：

在这里插入图片描述

⚠️：这里运行的 observable 只有一个，就是被 subscribed 的 pipedObservable

subjects

当需要触发一些数据的变动，并将其传递到不同的组件时，之前的做法都是使用 EventEmitter 去实现，如下面这个 service 案例：

import { EventEmitter, Injectable } from '@angular/core';@Injectable({providedIn: 'root',
})
export class UserService {activatedEmitter = new EventEmitter<boolean>();
}

实际上在应用的时候，也可以用 subject 去取代 EventEmitter，用法如下：

export class UserService {activatedEmitter = new Subject<boolean>();
}

替换了 Subject 后，就不能使用 emit，而是需要使用 next 去触发事件：

export class UserComponent implements OnInit {id: number;constructor(private route: ActivatedRoute,private userService: UserService) {}ngOnInit() {this.route.params.subscribe((params: Params) => {this.id = +params.id;});}
}

其他 subscribe 的使用方法一致。

二者使用上的区别主要是是否与 @Output 搭配使用，本质上来说 EventEmitter 的 interface 是这样的：

/*** Use in components with the `@Output` directive to emit custom events* synchronously or asynchronously, and register handlers for those events* by subscribing to an instance.*/
export declare interface EventEmitter<T> extends Subject<T> {}

它的初衷就是为了搭配 @Output 使用的，因此它做了一些限制，比如说只有父组件可以 subscribe @Output

项目部分更新

这里是对 第一个 Angular 项目 部分的更新，主要就是清理了一些代码，将 EventEmitter 更换成了 Subject，其他方面没什么大的变动

除了清理部分的代码修改如下：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/731178.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024最新版CleanMyMac X 4.15.1 Crack+激活码下载

2024最新版CleanMyMac X 4.15.1 Crack+激活码下载

CleanMyMac X 为您喜爱的事物腾出空间。 CleanMyMac 具有一系列巧妙的新功能&#xff0c;可让您安全、智能地扫描和清理整个系统、删除大型未使用的文件、减小 iPhoto 图库的大小、卸载不需要的应用程序或修复开始工作不正常的应用程序、管理所有应用程序您可以从一个地方进行扩…
阅读更多...
【牛客】HJ87 密码强度等级 CM62 井字棋

【牛客】HJ87 密码强度等级 CM62 井字棋

题目一:密码强度等级 题目链接&#xff1a;密码强度等级_牛客题霸_牛客网 (nowcoder.com) 本题主要考察C语言中逻辑分支语句&#xff0c;基本语句以及对各种特殊字符 &#xff0c;ASCII值以及条件表达中的逻辑运算符关系运算符各自功能的理解&#xff0c;以及基本使用&#x…
阅读更多...
MySQL安装使用（mac）

MySQL安装使用（mac）

目录 一、下载MySQL 二、环境变量 三、启动 MySql 四、初始化密码设置 一、下载MySQL 打开 MySql 官方下载页面 我是macOS12&#xff0c;所以选择了8.0.30 下载完成之后&#xff0c;打开安装&#xff0c;一直下一步安装完成&#xff0c;在最后安装完成时&#xff0c;会弹出…
阅读更多...
项目验收总结

项目验收总结

目录 一. 前置工作 二. 验收会现场 2.1 会议签到 2.2 项目验收PPT讲解 2.3 系统演示 2.4 意见 三. 项目总结报告 3.1 项目总结概述 3.2 项目完成度 3.3 项目管理 四. 验收材料清单 4.1 验收合格确认书(验收单) 4.2 项目验收总结报告 4.3 一些主要内容 五. 思维导图 一. …
阅读更多...
Stable Diffusion WebUI 中英文双语插件（sd-webui-bilingual-localization）并解决了不生效的情况

Stable Diffusion WebUI 中英文双语插件（sd-webui-bilingual-localization）并解决了不生效的情况

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文介绍一款中英文对照插件 sd-webui-bilingual-localization&#xff0c;该插件可以让你的 Stable Diffusion WebUI 界面同时显示中文和英文&#xff0c;让我…
阅读更多...
【内推】新风口-大模型独角兽公司minimax

【内推】新风口-大模型独角兽公司minimax

先上内推链接&#xff1a; MiniMax社招内推码: AK3XEJ6 投递链接: https://vrfi1sk8a0.jobs.feishu.cn/s/iFY5WFgE 岗位&#xff1a;前端、后端、算法&#xff0c;基础架构都有&#xff0c;大量hc 公司介绍&#xff1a; 国内同时拥有文本、语音、视觉三种基础大模型能力的创业…
阅读更多...
政安晨：【深度学习处理实践】（三）—— 处理时间序列的数据准备

政安晨：【深度学习处理实践】（三）—— 处理时间序列的数据准备

在深度学习中&#xff0c;对时间序列的处理主要涉及到以下几个方面&#xff1a; 序列建模&#xff1a;深度学习可以用于对时间序列进行建模。常用的模型包括循环神经网络&#xff08;Recurrent Neural Networks, RNN&#xff09;和长短期记忆网络&#xff08;Long Short-Term M…
阅读更多...
打造经典游戏：HTML5与CSS3实现俄罗斯方块

打造经典游戏：HTML5与CSS3实现俄罗斯方块

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
[Electron]中IPC进程间通信

[Electron]中IPC进程间通信

Electron中IPC 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。在 Electron 中&#xff0c;进程使用 ipcMain 和 ipcRenderer 模块&#xff0c;通过开发人员定义的“通道”传递消息来进行通信。 本文介绍以下几个方面&#xff1a; 1-渲染进程到…
阅读更多...
几大开源免费的 JavaScript 富文本编辑器测评

几大开源免费的 JavaScript 富文本编辑器测评

MarkDown 编辑器用的时间长了&#xff0c;发现发现富文本编辑器用起来是真的舒服。 一直以来写博客都是用的 MarkDown 编辑器&#xff0c;MarkDown 文档简单方便&#xff0c;使用几个简单的符号就可以定义出样式统一的富文本内容。写博客的时间长了&#xff0c;小玖就越来越排…
阅读更多...
Win11 没有网络bug

Win11 没有网络bug

1.问题描述 没有网络&#xff0c;dns一直是固定的&#xff0c;但是dns已经是自动获取了(MAC地址随机) 2.解决办法 1.首先&#xff0c;删除所有网络的手动dns配置,控制中心那个dns管理没有用,在设置中删除网络,不然问题还会出现 - 2.然后&#xff0c;进入注册表\HKEY_LOCAL_MACH…
阅读更多...
PHP在线图像处理程序：基于Photoshop的网页版图片处理源码

PHP在线图像处理程序：基于Photoshop的网页版图片处理源码

PHP在线PS修图网页版源码&#xff1a;实现照片图片处理的便捷工具 众所周知&#xff0c;许多朋友都喜欢使用PS进行图像编辑。然而&#xff0c;PS需要下载软件并对电脑配置要求较高。今天我们为大家带来一款基于浏览器的在线PS网页版源码&#xff0c;让您轻松实现在线P图和作图…
阅读更多...
JMeter VS RunnerGo ：两大主流性能测试工具对比

JMeter VS RunnerGo ：两大主流性能测试工具对比

说起JMeter&#xff0c;估计很多测试人员都耳熟能详。它小巧、开源&#xff0c;还能支持多种协议的接口和性能测试&#xff0c;所以在测试圈儿里很受欢迎&#xff0c;也是测试人员常用的工具&#xff0c;不少企业也基于JMeter建立起自己的自动化测试能力&#xff0c;提升工作效…
阅读更多...
【重要公告】BSV区块链协会开始对Teranode节点软件进行技术测试

【重要公告】BSV区块链协会开始对Teranode节点软件进行技术测试

​​发表时间&#xff1a;2024年2月22日 Teranode节点软件将使BSV区块链网络的交易处理速度提升至每秒110万笔&#xff0c;从而拓宽企业和政府客户的区块链应用范围。 2024年2月22日&#xff0c;瑞士楚格 - BSV区块链协会宣布已经开始对Teranode节点软件进行技术测试&#xff…
阅读更多...
BUUCTF-Misc4

BUUCTF-Misc4

镜子里面的世界1 1.打开附件 解压&#xff0c;是一张图片 2. zsteg工具 用zsteg分析图片 3.得到flag ningen1 1.打开附件 是一张图片 2.binwalk 用binwalk -e 分离文件 3.ARCHPR工具 打开分离后的文件夹&#xff0c;有一个加密的压缩包&#xff0c;用ARCHPR解密 4.解密 将…
阅读更多...
superset连接Apache Spark SQL（hive）过程中的各种报错解决

superset连接Apache Spark SQL（hive）过程中的各种报错解决

superset连接数据库官方文档&#xff1a;Installing Database Drivers | Superset 我们用的是Apache Spark SQL&#xff0c;所以首先需要安装下pyhive #命令既下载了pyhive也下载了它所依赖的其他安装包 pip install pyhive#多个命令也可下载 pip install sasl pip install th…
阅读更多...
‘ jupyter ‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

‘ jupyter ‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

安装anaconda后&#xff0c;在 Dos黑窗口 运行 jupyter notebook 的两个问题 原因&#xff1a;没配置环境变量 解决方法&#xff1a; 在 系统环境变量Path 中 添加两个地址 这里以anaconda安装在 D:\anaconda\install 下为例 &#xff08;根据个人安装具体位置而定&#xff…
阅读更多...
Elasticsearch：什么是 DevOps？

Elasticsearch：什么是 DevOps？

DevOps 定义 DevOps 是一种现代软件开发方法&#xff0c;它将公司软件开发 (Dev) 和 IT 运营 (Ops) 团队的工作结合起来并实现自动化。 DevOps 提倡这样一种理念&#xff1a;这些传统上独立的团队在协作方面比在孤岛中更有效。 理想情况下&#xff0c;DevOps 团队共同努力改进…
阅读更多...
Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能。然而&#xff0c;对于非AI专家来说&#xff0c;制定高质量的提示来引导 LLMs 是目前AI应用领域的一项重要挑战。现有的提示…
阅读更多...
优惠券秒杀案例 - CAS、Redis+Lua脚本解决高并发并行

优惠券秒杀案例 - CAS、Redis+Lua脚本解决高并发并行

目录 一、认识悲观锁和乐观锁&#xff1f; 二、一人一单问题&#xff08;优化&#xff09; 三、并行执行带来的问题 3.1Redis实现分布式锁 3.1.1 基础代码 3.1.2 保证释放的锁是自己的 3.1.3 Lua脚本保证原子性 情景介绍&#xff1a; 超卖问题在我们业务中很常见&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023