角信号生成器
用角信号生成器简化您的角开发, 一个信号和公用设施库,旨在取而代之,以更快、更清洁的编码.
看看这个 演示 学习更多.
| 发言 | 分支 | 职能 | 行数 |
|---|---|---|---|
安装
npm install @ddtmm/angular-signal-generators
兼容性
| 图书馆版本 | 角质版本 |
|---|---|
| 4.x (中文(简体) ) | 页:1 |
| 3.x 运算 | >=19.0.0 |
| 2.x 数据 | 时间:17.0.0 |
| 1.x 运算 | >=16.0.0 |
完整的测试套件运行于Angular 20,21和22对当前4.x发行.
使用量
您可以从 : @ddtmm/angular-signal-generators。和普通信号一样,库的信号也和普通功能一样使用.
import { debounceSignal, liftSignal, timerSignal } from '@ddtmm/angular-signal-generators';
@Component({
selector: 'app-signal-demo',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<div>{{$secondsSinceStart()}}</div>
<div>
<input type="text" [(ngModel)]="$debounced" />
{{debounced()}}
</div>
<div>
<button type="button" (click)="$liftedArray.push(secondsSinceStart())">
Add Element
</button>
{{$liftedArray() | json}}
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SignalDemoComponent {
readonly $debounced = debounceSignal('type in me', 1000);
readonly $liftedArray = liftSignal([0], null, ['push']);
readonly $secondsSinceStart = timerSignal(1000, 1000);
}
信号
动画信号 - 弹簧 Signal / tween Signal
这些是直接受斯维尔特的启发 弹簧 财务报告和审定财务报表 微调 函数。 当信号值发生变化时,所观察到的值会随着时间慢慢地变形. 因此,如果原始价值是 1个 下一个值被设定为 页:1,那么观测值将类似于 1个, (中文(简体) ), 1.512 (中文(简体) ), (中文(简体) ), 2.12 国家, (中文(简体) ), 2.6553 (中文(简体) ), (中文(简体) ), 3个 在一个固定的时间内.
同步符号
取一个同步源(保证,可观察)或信号/函数,以返回一个同步源并返回该源的值作为信号的一部分. 有点像一个rxjs平整操作员.
发音
这和Rxjs的很像 弹跳 操作员。 这有两个超载现象,一个是接受信号,而数值在只读信号中解开,另一个是它有一个 设定 财务报告和审定财务报表 更新 方法与值的改变发生于去发时间后.
DOM 观察信号 - 相交信号 / 突变信号 / 调整大小信号
这些信号将DOM观察者交叉观察员、突变观察员和调整观察员的大小包裹起来,以输出传递给信号的目标元素的最后一个变化观察结果.
事件符号
通过 Render2 聆听 HTML 元素事件并将其映射到新值.
由于信号可以传递,因此在视图Child功能下很容易使用.
过滤器符号
过滤设置到一个信号的值以防止值变化 :
如果在创建时指定的过滤器没有通过,那么信号就不会改变.
可用于防守功能.
历史符号
创建来自数值或反应源的历史信号。 一个值产生一个可写入的信号; 一个源
记录已观察到源值,并显示撤销/重做控制。 因为源通过角效应观察到,
多种同步排放可相接,中间值可跳过。 它暴露出反应性
canUndo 财务报告和审定财务报表 canRedo ,支持清除保留历史,并可以限制保留值的数量.
升起符号
"lifts"方法从信号值到信号本身,只是通过传递一连串的方法名称. 解除的方法应当是那些适合改变或更新数值的方法。 例如,举起 Array.push 将添加一个名为 推动 信号 呼叫电话 推动 方法将内部调用 signal.mutate() 带有执行推力的函数.
映射符号
创建一个信号,其输入值立即被映射到基于选择器的不同值上. 在选择器函数中可以传递并使用一个值或多个信号.
媒体查询符号
使用媒体查询,并随时更新其值,只要查询状态有匹配的更改.
鸟巢符号
创建一个在任何嵌入信号的值更新后其值会发生变化的信号,无论该信号有多深被嵌入. 它的值将会是每个信号被其所释放值所取代的对象.
在线信号
将浏览器的在线状态作为只读的信号,通过监听在线和离线事件进行报告.
可见符号
报告页面可见度通过监听作为只读的信号 visibilitychange。返回未定义的语境中不存在页面可见度 api .
减少符号
创建类似于 Array.reduce 或者说Rxjs的 scan 运算符,使用还原器函数从当前值和先前值创建新值.
顺序
序列信号对您想要在选项之间轻松循环的情况有用 。 例如,如果想要在真/假或大小列表之间切换. 这些仍然是可写入的信号, 这样您就可以手动覆盖当前值 .
也有一个特殊的选择,通过光标,光标类似于惯用光标,但可以被重置. 稍后可能会增加更多的功能.
存储信号 - 存储信号 Signal / localStorage Signal / sessionStorage Signal
信号使用二级存储系统来存储值,理想的是在应用寿命后. 下次信号被初始化后,初始值将来自这个二级存储. 使用 本地图集 财务报告和审定财务报表 会话集 为方便而存在.
计时器
这和Rxjs的很像 计时器 操作员。 它的行为就像 setTimeout 或视通过的参数而定的间隔。 每次勾选后,定时器的值会递增. 间距丢弃默认丢失了勾选,所以计数代表已发送回调. 设定 missedTickBehavior 改为 'coalesce' 在延迟后发出一次,同时将计数推进到其在间隔时间的逻辑位置.
节点符号
限制公布快速变化的频率。 它可以拖动另一个反应源 或者产生一个可写 信号节奏快,有可预知的先导和后导排放. 节流阀时间也可以是反应源.
公用事业
门效
一个在启动、停止或运行时带有选项来控制的效果.
检查
受斯维尔特的$inspect rune的启发,记录在物体,阵列或信号中深层嵌入的信号的解析值.
资源参考承诺
转换资源参考文献 resource 或者说 httpResource 一次承诺,在第一次排放后解决.
信号显示器
将信号转换为同步器。 一旦创建,修改会被保留,直到元素在后期被循环.
公约
反应源和值源
尽可能地发出信号,这些函数试图从值或其他信号中产生信号. 为了适应这种情况,许多论点都属于类型 反应源<T> 或者说 数值来源<T>。 。 。 .
反应源 要么可以转换成信号 符号,可以传递给 计算 或普通老年人 信号这样做的目的是让事情更方便一点.
数值来源
A 类 数值来源 是一个 反应源 或一个值。这里的限制因素是,如果您想要使用 信号源 作为价值, 然后你必须包装在一个 信号。 。 。 .
const timerFromValue = timerSignal(1000);
const timeSourceAsSignal = signal(1000);
const timerFromSignal = timer(timeSourceAsSignal);
const timerFromComputedFn = timer(() => timeSourceAsSignal() * 2);
const timerSource$ = new BehaviorSubject(1000);
const timerFromObservable = timer(timerSource$);
过载
几台接受传统价值的发电机 反应源 将会有不同的返回类型。 那些接受 反应源 将只返回一个读取的信号,而那些具有传统价值的将拥有更新信号的方法,尽管不一定与 可写符号。 。 。 .
喷出器
所有信号生成器都有接受注射器的选项参数. 这要么是因为 效果 有时需要,或者它通过 如果一个可观测到的信号被转换成信号.
问题还是想法?
我只是在遇到现实生活中的问题时增加信号 如果您有想法或遇到技术困难, 请添加一个问题 .