”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 角度信号和 RxJS 的新功能

角度信号和 RxJS 的新功能

发布于2024-11-08
浏览:334

1) Signals 与 RxJS:在 Angular 16 中从头开始创建 Signal 变量并将其与 Observable 进行比较。

以我们有侧边栏菜单和顶部菜单的示例为例,每次按下按钮时,顶部菜单都会告诉侧边栏菜单折叠:

New Features in Angular  Signals and RxJS

使用 RxJS:

这种通信是在使用主题和可观察量的服务中完成的,每次我们单击按钮时,都会调用 next ,它将发出的值传递给订阅的可观察量。侧边栏菜单组件将被简单地订阅并在 HTML 中使用此属性。首先,我们在服务中创建主题,然后从中创建可观察对象,然后调用 next 来传递发出的值:

New Features in Angular  Signals and RxJS

New Features in Angular  Signals and RxJS

New Features in Angular  Signals and RxJS

有信号:

这可以通过信号简单地完成。在 Angular 中创建信号是为了在某些更简单的情况下实现更好的性能。它们是从@angular/core导入的。

您需要声明一个信号,每次更新该信号时,我们都会对其调用 set 。在侧边栏菜单组件中,我们只需引用该属性,并且要在 HTML 中使用信号,我们需要将其放在括号中以获取其值,因为这就是信号的使用方式。

我们还可以执行更新,这具有告诉我们之前的值的额外好处。为此,我们指定它接收前一个值及其类型,并使用箭头函数指示新值,即取反的新值:

New Features in Angular  Signals and RxJS

New Features in Angular  Signals and RxJS

New Features in Angular  Signals and RxJS

还有一些方法可以将可观察量转换为信号以及将信号转换为可观察量:

New Features in Angular  Signals and RxJS

这并不是说信号可以替代主体,因为两者以及可观察量都更强大并且具有更多功能,例如 RxJS 运算符(我们对 RxJS 拥有更多控制权)。然而,信号提供了一种简单的工作方式,并且与其他库和框架很常见。

RxJS 是 Microsoft 的一个库,而不是 Angular。相比之下,Signals 是 Angular 的一个库,它提供了更好的控制和性能,因为它允许 Angular 在状态变化时准确地知道哪个部分发生了变化。这避免了重新渲染整个组件,只关注该特定部分。

2) 在 Angular 16 中使用 RxJS 的 takeUntilDestroyed 取消订阅的新简化方法。

在 Angular 中,取消订阅 observable 非常重要。举个例子,在 OnInit 中,我们存储订阅,在 OnDestroy 中,我们取消订阅。

旧的方法是用订阅存储一个变量,在订阅时,将其保存在该变量中并在 OnDestroy 中销毁该订阅:

New Features in Angular  Signals and RxJS

详细说明:创建订阅类型(来自 RxJS)的属性。该属性在 ngOnInit 中初始化,在进行订阅时为其分配订阅的引用。然后,在 ngOnDestroy 中,订阅被取消。如果组件没有定义订阅变量,则需要处理错误,可以使用问号来检查它是否已定义,也可以通过条件。

现在,通过使用 RxJS 运算符 takeUntilDestroyed,可以更简单地完成此操作,无需创建 OnDestroy 或订阅变量。这样做的作用是在组件即将被销毁时自动取消订阅。注入 DestroyRef 服务并传递它很重要,这样它就知道组件何时被销毁:

New Features in Angular  Signals and RxJS

详细说明:现在,在我们不取消订阅的情况下,我们添加一个 RxJS 管道并向其发送一个 takeUntilDestroyed(),一个 NEW 运算符,这要求我们传递一个 destroyRef,它是一个服务(来自 @angular /core) 我们可以将其注入到构造函数中。

示例:在侧边栏服务中,它侦听导航栏组件中的按钮单击。使用 takeUntilDestroyed(),它仅在组件被销毁时取消订阅,从而避免了多次订阅。在这种情况下,我们总是想监听按钮是否被按下;因此,我们只想在组件被销毁时取消订阅。

这一点很重要,否则,即使我们在其他组件中,它也会监听,并且只有当我们关闭应用程序时,它才会取消订阅,因为组件已被销毁。这很重要,因为如果它始终处于活动状态,那么在浏览页面组件时,例如在第一个导航中,它会订阅,然后我们导航到另一个页面,当我们返回到第一个页面时,这将是第二个订阅,导致两个活跃订阅。因此,取消订阅很重要。

重要提示:当我们订阅 HTTP 请求时,无需取消订阅,因为这是自动完成的。

3) Angular 中信号的影响。监听信号的变化。

在一个示例中,我们有一个返回布尔值的信号,并且在下面的方法中,它通过更新进行更新:

New Features in Angular  Signals and RxJS

想象一下,您希望在信号发生变化时收到警报,但信号发生变化的地方很多,而不仅仅是此方法。如果我们想在变化时做某事,我们可以用效果来做到这一点。该函数接受一个信号并检查它是否更改为自动执行效果内的方法:

New Features in Angular  Signals and RxJS

例如,有了这个,我们可以将值保存在本地存储中,并用该值实例化它,而不是控制台日志。当处理我们不知道并且不确定有多少地方被修改的代码时,这特别有用。

— 基于 EfisioDev 的 Angular 课程的注释 —

版本声明 本文转载于:https://dev.to/samirabawad/new-features-in-angular-16-signals-and-rxjs-ec5?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Python 与 Java:深入探讨最适合您的编程语言
    Python 与 Java:深入探讨最适合您的编程语言
    大家好!你这周过得怎么样? ?无论您是正在进行编码马拉松、享受应得的休息,还是只是来这里探索新技术想法,我们都很高兴有您。今天,我们将深入探讨一个热门话题:Python 与 Java。 ? 这两个编程巨头经常处于争论的中心,尤其是在为下一个项目选择正确的语言时。你应该选择Python的简单性还是Ja...
    编程 发布于2024-11-08
  • 合并关联数组时如何对共享键的值求和?
    合并关联数组时如何对共享键的值求和?
    合并数组并对共享键值求和在组合与共享键关联的值时,经常需要合并多个关联数组。默认情况下,数组合并会覆盖冲突的值,如提供的示例中所示。为了解决这个问题,我们提出了一系列方法,可以有效地为共享密钥添加值,同时保留唯一密钥。使用数组中间体:一种方法是计算使用数组中间值手动求和。这涉及到迭代合并数组的键并对...
    编程 发布于2024-11-08
  • React 基础知识~渲染性能/ useTransition
    React 基础知识~渲染性能/ useTransition
    假设我们要显示大量数据,例如一万条数据,在将下一个值输入到输入字段时通常会出现延迟。 在这种情况下,当我们输入一个值时,屏幕会显示过滤后的数据。 但是,出现的一个问题是由于处理太多数据而延迟显示下一个操作,例如在输入字段中输入下一个值。 ·src/Example.js import { useSt...
    编程 发布于2024-11-08
  • PHP提交表单时如何防止多次插入?
    PHP提交表单时如何防止多次插入?
    防止 PHP 中表单提交时的多次插入当用户多次按下提交按钮时,可能会在提交表单时发生多次插入。这可能会导致意外的数据重复。有几种方法可以解决此问题:JavaScript 提交按钮禁用:此方法使用 JavaScript 禁用提交按钮后点击。但是,它并不可靠,因为可以在不使用按钮或禁用 JavaScri...
    编程 发布于2024-11-08
  • 探索 JavaScript 中真值与假值的核心...
    探索 JavaScript 中真值与假值的核心...
    在 JavaScript 中,真值是在布尔上下文中计算时被视为 true 的任何值。不虚假的值被认为是真实的。 真值示例: 任何非零数字 (1,-5,3.14) 非空字符串 ("hello" ) 空间值(" ") 对象 ({}, []) 布尔值...
    编程 发布于2024-11-08
  • 如何在 PHP 中抑制 \"htmlParseEntityRef: waiting \';\' in Entity\" 警告?
    如何在 PHP 中抑制 \"htmlParseEntityRef: waiting \';\' in Entity\" 警告?
    正在解析“htmlParseEntityRef:期待 ';' in Entity”警告将 HTML 内容加载到 DOMDocument 时,您可能会遇到警告“htmlParseEntityRef: waiting ';'在实体中。”此错误通常是由于加载内容中的 HTM...
    编程 发布于2024-11-08
  • 如何在 PHP 中根据与另一个 2D 数组的交集从 2D 数组中过滤行?
    如何在 PHP 中根据与另一个 2D 数组的交集从 2D 数组中过滤行?
    基于行交集过滤二维数组的行在 PHP 中,array_diff_assoc() 函数旨在查找两个数组之间的差异,同时对键值进行优先级排序对。然而,当使用此函数根据与另一个 2D 数组的交集来过滤 2D 数组中的行时,它可能并不总是产生预期的结果。理解问题问题的出现是由于由 array_diff_as...
    编程 发布于2024-11-08
  • SQLRAG:利用自然语言和法学硕士转变数据库交互
    SQLRAG:利用自然语言和法学硕士转变数据库交互
    在数据驱动的世界中,速度和洞察力的可访问性至关重要,SQLRAG 带来了一种与数据库交互的全新方法。通过利用大型语言模型 (LLM) 的强大功能,SQLRAG 使用户能够使用自然语言查询数据库,从而无需深厚的 SQL 知识。在这篇文章中,我们将深入探讨 SQLRAG 的工作原理、其主要功能,以及它如...
    编程 发布于2024-11-08
  • 哪些构建系统可以扩展 Go 的开发工作流程?
    哪些构建系统可以扩展 Go 的开发工作流程?
    Go 构建系统:扩展您的开发工作流程Go 是一种以其简单性和并发性而闻名的编程语言,已获得广泛的认可。随着开发项目的发展,对强大的构建系统来自动化构建、测试和部署过程的需求变得至关重要。但是哪些构建系统支持 Go 并增强其功能?Makefile:初始 Go 构建系统传统上,Go 依赖于与其源代码发行...
    编程 发布于2024-11-08
  • 如何在 JavaScript 中安全处理空值
    如何在 JavaScript 中安全处理空值
    JavaScript 中的空值检查使用 JavaScript 时,正确处理“空”值至关重要。但是,标准空检查可能并不总是按预期工作。让我们探讨原因并提供替代解决方案。了解 JavaScript 的 Null Check在 JavaScript 中,相等运算符 (==) 和严格相等运算符 (===)分...
    编程 发布于2024-11-08
  • 使用 AWS Lambda 为 Next.js 构建无服务器后端
    使用 AWS Lambda 为 Next.js 构建无服务器后端
    在不断发展的 Web 开发世界中,利用无服务器架构已经成为游戏规则的改变者,尤其是对于 Next.js 应用程序而言。通过集成 AWS Lambda,开发人员可以构建可扩展且高效的后端,而无需管理服务器的开销。在这篇文章中,我们将探讨如何使用 AWS Lambda 为您的 Next.js 应用程序...
    编程 发布于2024-11-08
  • 当你开始学习编程语言时会发生什么
    当你开始学习编程语言时会发生什么
    在数字时代,学习编程语言不仅是一种优势,而且是一种必要。无论您的目标是提升职业生涯、构建创新应用程序,还是只是更好地了解数字世界,编程技能都是不可或缺的。让我们深入探讨您应该踏上这一变革之旅的原因和方式。 学习编程语言的重要性 职业发展 根据美国劳工统计局的数据,从 ...
    编程 发布于2024-11-08
  • 如何使用匿名结构或联合编译 C 代码?
    如何使用匿名结构或联合编译 C 代码?
    使用匿名结构/联合编译 C 代码出现了关于如何使用匿名结构或联合编译 C 代码的问题,如C 具有使用联合的匿名字段。在 C 中,尝试使用包含匿名联合的命名结构创建类似的结构会导致编译错误。错误消息表明匿名联合和结构字段未在结构声明中声明。要在 C 中启用此功能,必须使用 -fms-extension...
    编程 发布于2024-11-08
  • 如何使用 OpenSSL 和 C++ 生成 SHA256 哈希值?
    如何使用 OpenSSL 和 C++ 生成 SHA256 哈希值?
    使用 OpenSSL 和 C 生成 SHA256 哈希 哈希是一种加密技术,用于生成数据的唯一指纹或摘要。对于 SHA256(安全哈希算法 2,256 位),此摘要是 256 位十六进制字符串。 SHA256 通常用于检查数据完整性、验证数字签名和安全存储密码。在本文中,我们将介绍如何使用 Open...
    编程 发布于2024-11-08
  • 探索软件工程师的就业市场
    探索软件工程师的就业市场
    Introduction In this article, we dive into the process of extracting and analyzing job data from LinkedIn, leveraging a combination of Python...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3