1) Signals 与 RxJS:在 Angular 16 中从头开始创建 Signal 变量并将其与 Observable 进行比较。
以我们有侧边栏菜单和顶部菜单的示例为例,每次按下按钮时,顶部菜单都会告诉侧边栏菜单折叠:
使用 RxJS:
这种通信是在使用主题和可观察量的服务中完成的,每次我们单击按钮时,都会调用 next ,它将发出的值传递给订阅的可观察量。侧边栏菜单组件将被简单地订阅并在 HTML 中使用此属性。首先,我们在服务中创建主题,然后从中创建可观察对象,然后调用 next 来传递发出的值:
有信号:
这可以通过信号简单地完成。在 Angular 中创建信号是为了在某些更简单的情况下实现更好的性能。它们是从@angular/core导入的。
您需要声明一个信号,每次更新该信号时,我们都会对其调用 set 。在侧边栏菜单组件中,我们只需引用该属性,并且要在 HTML 中使用信号,我们需要将其放在括号中以获取其值,因为这就是信号的使用方式。
我们还可以执行更新,这具有告诉我们之前的值的额外好处。为此,我们指定它接收前一个值及其类型,并使用箭头函数指示新值,即取反的新值:
还有一些方法可以将可观察量转换为信号以及将信号转换为可观察量:
这并不是说信号可以替代主体,因为两者以及可观察量都更强大并且具有更多功能,例如 RxJS 运算符(我们对 RxJS 拥有更多控制权)。然而,信号提供了一种简单的工作方式,并且与其他库和框架很常见。
RxJS 是 Microsoft 的一个库,而不是 Angular。相比之下,Signals 是 Angular 的一个库,它提供了更好的控制和性能,因为它允许 Angular 在状态变化时准确地知道哪个部分发生了变化。这避免了重新渲染整个组件,只关注该特定部分。
2) 在 Angular 16 中使用 RxJS 的 takeUntilDestroyed 取消订阅的新简化方法。
在 Angular 中,取消订阅 observable 非常重要。举个例子,在 OnInit 中,我们存储订阅,在 OnDestroy 中,我们取消订阅。
旧的方法是用订阅存储一个变量,在订阅时,将其保存在该变量中并在 OnDestroy 中销毁该订阅:
详细说明:创建订阅类型(来自 RxJS)的属性。该属性在 ngOnInit 中初始化,在进行订阅时为其分配订阅的引用。然后,在 ngOnDestroy 中,订阅被取消。如果组件没有定义订阅变量,则需要处理错误,可以使用问号来检查它是否已定义,也可以通过条件。
现在,通过使用 RxJS 运算符 takeUntilDestroyed,可以更简单地完成此操作,无需创建 OnDestroy 或订阅变量。这样做的作用是在组件即将被销毁时自动取消订阅。注入 DestroyRef 服务并传递它很重要,这样它就知道组件何时被销毁:
详细说明:现在,在我们不取消订阅的情况下,我们添加一个 RxJS 管道并向其发送一个 takeUntilDestroyed(),一个 NEW 运算符,这要求我们传递一个 destroyRef,它是一个服务(来自 @angular /core) 我们可以将其注入到构造函数中。
示例:在侧边栏服务中,它侦听导航栏组件中的按钮单击。使用 takeUntilDestroyed(),它仅在组件被销毁时取消订阅,从而避免了多次订阅。在这种情况下,我们总是想监听按钮是否被按下;因此,我们只想在组件被销毁时取消订阅。
这一点很重要,否则,即使我们在其他组件中,它也会监听,并且只有当我们关闭应用程序时,它才会取消订阅,因为组件已被销毁。这很重要,因为如果它始终处于活动状态,那么在浏览页面组件时,例如在第一个导航中,它会订阅,然后我们导航到另一个页面,当我们返回到第一个页面时,这将是第二个订阅,导致两个活跃订阅。因此,取消订阅很重要。
重要提示:当我们订阅 HTTP 请求时,无需取消订阅,因为这是自动完成的。
3) Angular 中信号的影响。监听信号的变化。
在一个示例中,我们有一个返回布尔值的信号,并且在下面的方法中,它通过更新进行更新:
想象一下,您希望在信号发生变化时收到警报,但信号发生变化的地方很多,而不仅仅是此方法。如果我们想在变化时做某事,我们可以用效果来做到这一点。该函数接受一个信号并检查它是否更改为自动执行效果内的方法:
例如,有了这个,我们可以将值保存在本地存储中,并用该值实例化它,而不是控制台日志。当处理我们不知道并且不确定有多少地方被修改的代码时,这特别有用。
— 基于 EfisioDev 的 Angular 课程的注释 —
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3