首页 > 其他分享 >Signal in Angular

Signal in Angular

时间:2024-03-07 22:44:38浏览次数:21  
标签:set signal 对象 Signal input Angular

Signal in Angular

Angular 16+ 开始引入了 Signal,按照官方的说法是为了替代 zone。当第一眼看到signal,我曾遐想翩翩,立刻想到了 Vue 中的Ref,又想到了mobx。然而,Angular 官方给的例子居然用了一个count,一个计数的例子。它居然不用对象来举例。我脑补了好多细节。但是当真的尝试却发现,我想多了。那么简单一句话,Angular 里面的 Signal 究竟是个啥,有啥用处? 先给结论

结论

  • signal 除了使用的时候多了个方法调用signaldata(),除此之外,它跟它里面的对象是同一个对象。没有任何区别。
const orignData = { a: 1, b: { c: 1 } };
const data = signal(orignData);
data() === originData; // true
  • signal 对象跟原始对象有什么区别
    唯一的区别是当 signal 对象发送变化的时候,这些使用signaldata() 会被 angularmarkForCheck, 注意不是detachChange()
  • signal 对象中的update() vs set()有啥区别
    这两个方法没有任何区别。纯粹是两个不同的用法
  • 既然 signal 对象跟原始对象是一样的,那可以直接修改原始对象吗?
    你当然可以修改原始对象。如果 signal 中的对象引用没有发生变化,修改也有可能被反应到 UI 上。但是有限制
    • 对于 OnPush 的组件,如果直接修改对象,不会被 angular 标记,如果使用update/set并且 signal 对象被认为发生改变,则会被标记
  • 如何认为 signal 对象发生了变化?
    signal(initalvalue:any,options?:{equal:((pre,cur)=>boolean)}),如果没有提供第二个参数,那么默认是通过===来判断是否发生改变。所以,在使用update/set方法的时候一定要返回一个新的对象{...obj},否则 signal 对象会认为没有发生变化。也就是你跟修改原始对象的效果是一致的。
  • 如何看待 computed 对象?
    它其实就是一个对于依赖的 signal 的对象的推导(derive)。当最后一次执行 computed 函数体时,用到的 signal 对象发生变化,computed 的值才会被重新计算,否则,不会被计算。
  • 那如何看待 signal input 呢。
    我认为它就是一个 signal 的桥架语法糖。将 signal 对象的链路通过 input 连起来。如果没有它,你得通过一些不正常的方式来传递 signal 对象。例如,hack 的方式我没有试,也不知道是否合法,但从 js 语法来说是合法的。
// parent

<child [hackSignal]="signal1"  [signalInput]="signal2()"></child>

signal1=signal(1);
signal2=signal(2);

// child component
<div>{{hackSignal().xxx}}</div>
<div>{{signalInput().xxx}}</div>

@Input()
hackSignal:WritableSignal<T>();

signalInput=input.required<T>();

Angular 的 signal 跟 mobx 或者 Vue 比,不是一个量级的。我原以为,它使用了跟他们类似的代理,功能平分秋色,然而,真的没有他自己吹的那样。

标签:set,signal,对象,Signal,input,Angular
From: https://www.cnblogs.com/kongshu-612/p/18059958

相关文章

  • (笔记)Linux信号(signal) 机制和信号量(semaphore)机制的区别
     字面上相似,但是本质上存在巨大的差别! 一、Linux信号(signal)机制signal,又简称为信号(软中断信号)用来通知进程发生了异步事件。原理:一个进程收到一个信号与处理器收到一个中断请求可以说是一样的。信号是进程间通信机制中唯一的异步通信机制,一个进程不必通过任何操作来......
  • (续)signal-slot:python版本的多进程通信的信号与槽机制(编程模式)的库(library) —— 强化学
    前文:signal-slot:python版本的多进程通信的信号与槽机制(编程模式)的库(library)——强化学习ppo算法库sample-factory的多进程包装器,实现类似Qt的多进程编程模式(信号与槽机制)——python3.12版本下成功通过测试......
  • AngularJs 数据渲染完成之后,执行回调方法
     请求远程数据--》数据模型变化--》angularjs监控到模型变化--》重新渲染页面。 注册一个自定义的指令.directive('OnReanderFinsh',[function(){return{restrict:'A',link:function($scope,element,attrs,controller){......
  • 揭秘界面控件Kendo UI for Angular中新的日期增强功能!
    KendoUIforAngular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能AngularUI组件,无需任何jQuery依赖关系。在本文中,我们将带大家了解KendoUIforAngular的DateInput组件中有什么新功能,新功能可以帮助您提升应用程序并为用户提供增强的日期输入体验......
  • Angular Material 17+ 高级教程 – Custom Themes (自定义主题) for Material Design
    前言AngularMaterialv17.2.0发布了MaterialDesign3Theme   上一篇 AngularMaterial17+高级教程–GetStarted下一篇TODO想查看目录,请移步 Angular17+高级教程–目录......
  • 安装指定版本Angular Cli
    在运行ngserve的时候会报错ng不是内部命令,这是因为你的node环境上没有安装angular/cli。安装指定版本AngularCli1、卸载旧版本angularnpmuninstall-g@angular/cli2、清楚缓存,确保卸载干净npmcacheclean--force3、检查是否卸载干净ng-v如果出现版本号则说明未......
  • Angular 17+ 高级教程 – Prettier, ESLint, Stylelint
    前言不熟悉 Prettier,ESLint,Stylelint的朋友可以先看这篇 工具–Prettier、ESLint、Stylelint。本篇主要是教如何在Angular项目引入 Prettier、ESLint、Stylelint。 ESLint       目录上一篇 TODO下一篇TODO想查看目录,请移步 Angular17+高......
  • Angular 17+ 高级教程 – Angular 的局限和 Github Issues
    前言Angular绝对有很多缺陷,Issue非常多,workaround非常多。我以前至少有subscribe超过20个Issues,几年都没有rightway处理的。 Angular不支持Custom@DecoratorAngular自己是有在用Decorator (旧版,不是TypeScript5.0后的版本) 的,但是我们可用不了。相关......
  • Asp-Net-Core学习笔记:3.使用SignalR实时通信框架开发聊天室
    SignalR牛刀小试在MVP杨老师的博客里看到这么个东西,我还以为是NetCore3才推出的新玩意,原来是已经有很多年的历史了,那看来还是比较成熟的一个技术了。简介SignalR是一个.NETCore/.NETFramework的开源实时框架,SignalR的可使用WebSocket,ServerSentEvents和LongPolling......
  • Linux--signal
    Linux的signal.h头文件包含了一系列与信号处理相关的函数。以下是一些主要的函数及其简要描述:intsignal(intsignum,void(*handler)(int)):功能:为指定的信号注册一个处理函数。参数:signum是信号的编号,handler是当信号发生时被调用的函数。返回值:成功时返回之前的信号处理......