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

角度信号和 RxJS 的新功能

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

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]删除
最新教程 更多>
  • 表单刷新后如何防止重复提交?
    表单刷新后如何防止重复提交?
    在Web开发中预防重复提交 在表格提交后刷新页面时,遇到重复提交的问题是常见的。要解决这个问题,请考虑以下方法: 想象一下具有这样的代码段,看起来像这样的代码段:)){ //数据库操作... 回声“操作完成”; 死(); } ?> ...
    编程 发布于2025-07-03
  • 使用jQuery如何有效修改":after"伪元素的CSS属性?
    使用jQuery如何有效修改":after"伪元素的CSS属性?
    在jquery中了解伪元素的限制:访问“ selector 尝试修改“:”选择器的CSS属性时,您可能会遇到困难。 This is because pseudo-elements are not part of the DOM (Document Object Model) and are th...
    编程 发布于2025-07-03
  • 如何限制动态大小的父元素中元素的滚动范围?
    如何限制动态大小的父元素中元素的滚动范围?
    在交互式接口中实现垂直滚动元素的CSS高度限制问题:考虑一个布局,其中我们具有与用户垂直滚动一起移动的可滚动地图div,同时与固定的固定sidebar保持一致。但是,地图的滚动无限期扩展,超过了视口的高度,阻止用户访问页面页脚。$("#map").css({ marginT...
    编程 发布于2025-07-03
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-07-03
  • 如何同步迭代并从PHP中的两个等级阵列打印值?
    如何同步迭代并从PHP中的两个等级阵列打印值?
    同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时,一个包含country代码的数组,另一个包含乡村代码,另一个包含其相应名称的数组,可能会因不当提供了exply for for for the uncore for the forsion for for ytry...
    编程 发布于2025-07-03
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-07-03
  • JavaScript计算两个日期之间天数的方法
    JavaScript计算两个日期之间天数的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    编程 发布于2025-07-03
  • 为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    编程 发布于2025-07-03
  • Spark DataFrame添加常量列的妙招
    Spark DataFrame添加常量列的妙招
    在Spark Dataframe ,将常数列添加到Spark DataFrame,该列具有适用于所有行的任意值的Spark DataFrame,可以通过多种方式实现。使用文字值(SPARK 1.3)在尝试提供直接值时,用于此问题时,旨在为此目的的column方法可能会导致错误。 df.withCo...
    编程 发布于2025-07-03
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-07-03
  • Java中假唤醒真的会发生吗?
    Java中假唤醒真的会发生吗?
    在Java中的浪费唤醒:真实性或神话?在Java同步中伪装唤醒的概念已经是讨论的主题。尽管存在这种行为的潜力,但问题仍然存在:它们实际上是在实践中发生的吗? Linux的唤醒机制根据Wikipedia关于伪造唤醒的文章,linux实现了pthread_cond_wait()功能的Linux实现,利用...
    编程 发布于2025-07-03
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-07-03
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-07-03
  • 人脸检测失败原因及解决方案:Error -215
    人脸检测失败原因及解决方案:Error -215
    错误处理:解决“ error:((-215)!empty()in Function Multultiscale中的“ openCV 要解决此问题,必须确保提供给HAAR CASCADE XML文件的路径有效。在提供的代码片段中,级联分类器装有硬编码路径,这可能对您的系统不准确。相反,OPENCV提...
    编程 发布于2025-07-03
  • 反射动态实现Go接口用于RPC方法探索
    反射动态实现Go接口用于RPC方法探索
    在GO 使用反射来实现定义RPC式方法的界面。例如,考虑一个接口,例如:键入myService接口{ 登录(用户名,密码字符串)(sessionId int,错误错误) helloworld(sessionid int)(hi String,错误错误) } 替代方案而不是依靠反射...
    编程 发布于2025-07-03

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

Copyright© 2022 湘ICP备2022001581号-3