[Angular 基础] - Observable

2024-03-09 07:20
文章标签 javascript 基础 frontend angular observable

本文主要是介绍[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，其他方面没什么大的变动

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

在这里插入图片描述

这篇关于[Angular 基础] - Observable的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/789938。

相关文章

Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
从基础到高级详解Python数值格式化输出的完全指南

从基础到高级详解Python数值格式化输出的完全指南

《从基础到高级详解Python数值格式化输出的完全指南》在数据分析、金融计算和科学报告领域,数值格式化是提升可读性和专业性的关键技术,本文将深入解析Python中数值格式化输出的相关方法,感兴趣的小伙... 目录引言：数值格式化的核心价值一、基础格式化方法1.1 三种核心格式化方式对比1.2 基础格式化示例
阅读更多...
redis-sentinel基础概念及部署流程

redis-sentinel基础概念及部署流程

《redis-sentinel基础概念及部署流程》RedisSentinel是Redis的高可用解决方案,通过监控主从节点、自动故障转移、通知机制及配置提供,实现集群故障恢复与服务持续可用,核心组件包... 目录一. 引言二. 核心功能三. 核心组件四. 故障转移流程五. 服务部署六. sentinel部署
阅读更多...
从基础到进阶详解Python条件判断的实用指南

从基础到进阶详解Python条件判断的实用指南

《从基础到进阶详解Python条件判断的实用指南》本文将通过15个实战案例,带你大家掌握条件判断的核心技巧,并从基础语法到高级应用一网打尽,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录​引言：条件判断为何如此重要一、基础语法：三行代码构建决策系统二、多条件分支：elif的魔法三、
阅读更多...
Python WebSockets 库从基础到实战使用举例

Python WebSockets 库从基础到实战使用举例

《PythonWebSockets库从基础到实战使用举例》WebSocket是一种全双工、持久化的网络通信协议,适用于需要低延迟的应用,如实时聊天、股票行情推送、在线协作、多人游戏等,本文给大家介... 目录1. 引言2. 为什么使用 WebSocket？3. 安装 WebSockets 库4. 使用 We
阅读更多...
从基础到高阶详解Python多态实战应用指南

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质：python的“鸭子类型”哲学二、多态的三大实战场景场景1：数据处理管道——统一处理不同数据格式
阅读更多...
MySQL数据类型与表操作全指南( 从基础到高级实践)

MySQL数据类型与表操作全指南( 从基础到高级实践)

《MySQL数据类型与表操作全指南(从基础到高级实践)》本文详解MySQL数据类型分类（数值、日期/时间、字符串）及表操作（创建、修改、维护）,涵盖优化技巧如数据类型选择、备份、分区,强调规范设计与... 目录mysql数据类型详解数值类型日期时间类型字符串类型表操作全解析创建表修改表结构添加列修改列删除列
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2