文件列表:

.editorconfig (296, 2023-12-26)
.eslintrc.json (580, 2023-12-26)
.vscode/ (0, 2023-12-26)
.vscode/extensions.json (130, 2023-12-26)
.vscode/launch.json (470, 2023-12-26)
.vscode/settings.json (98, 2023-12-26)
.vscode/tasks.json (938, 2023-12-26)
CONTRIBUTING.md (640, 2023-12-26)
LICENSE (1079, 2023-12-26)
angular.json (5453, 2023-12-26)
package-lock.json (621594, 2023-12-26)
package.json (2680, 2023-12-26)
projects/ (0, 2023-12-26)
projects/demo/ (0, 2023-12-26)
projects/demo/src/ (0, 2023-12-26)
projects/demo/src/404.md (31, 2023-12-26)
projects/demo/src/app/ (0, 2023-12-26)
projects/demo/src/app/app.component.ts (2432, 2023-12-26)
projects/demo/src/app/app.config.ts (731, 2023-12-26)
projects/demo/src/app/app.routes.ts (1415, 2023-12-26)
projects/demo/src/app/controls/ (0, 2023-12-26)
projects/demo/src/app/controls/contents-class.directive.ts (260, 2023-12-26)
projects/demo/src/app/controls/example-code.component.ts (1286, 2023-12-26)
projects/demo/src/app/controls/home-box.component.ts (1372, 2023-12-26)
projects/demo/src/app/controls/signal-header.component.ts (1374, 2023-12-26)
projects/demo/src/app/controls/signal-type-badge.component.ts (1162, 2023-12-26)
projects/demo/src/app/demo-configuration.ts (3680, 2023-12-26)
projects/demo/src/app/demos/ (0, 2023-12-26)
projects/demo/src/app/demos/debounce-signal.component.ts (3601, 2023-12-26)
projects/demo/src/app/demos/extend-signal.component.ts (2838, 2023-12-26)
projects/demo/src/app/demos/filter-signal.component.ts (2401, 2023-12-26)
projects/demo/src/app/demos/lift-signal.component.ts (2897, 2023-12-26)
projects/demo/src/app/demos/map-signal.component.ts (2102, 2023-12-26)
projects/demo/src/app/demos/reduce-signal.component.ts (2321, 2023-12-26)
projects/demo/src/app/demos/sequence-signal.component.ts (2053, 2023-12-26)
... ...

# Angular Signal Generators Angular Signal Generators are purpose built signals meant to simplify common tasks encountered in Components. Check out the [demos](https://ddtmm.github.io/angular-signal-generators/) for a better idea on how they can be used. | Statements | Branches | Functions | Lines | | --------------------------- | ----------------------- | ------------------------- | ----------------- | |  |  |  |  | ## Installation ``` npm install @ddtmm/angular-signal-generators ``` ## Usage You can import the signals from `'@ddtmm/angular-signal-generators`. The signals are used just like ordinary functions. ```ts import { debounceSignal, liftSignal, timerSignal } from '@ddtmm/angular-signal-generators'; @Component({ selector: 'app-signal-demo', standalone: true, imports: [CommonModule, FormsModule], template: ` `, 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 Generators ### debounceSignal This is very similar to rxjs's *debounce* operator. This has two overloads - one where it accepts a signal and the value is debounced in a readonly signal, and one where it has a *set* and *update* method and the change of the value occurs after debounce time elapses. ### extendSignal Adds new methods to a signal - even hiding the existing methods if desired. It does this by passing the original signal or a "proxy" as the first parameter of the new method. This first parameter is obscured from the consumer so that it appears to be a normal method. ### filterSignal Filters values from another signal or from values set on directly on the signal. Can be used with guard functions. ### liftSignal "Lifts" methods from a signal's value to the signal itself just by passing a tuple of method names. The lifted methods should be those appropriate for mutating or updating the value. For example, lifting `Array.push` will add a method called *push* to the signal. Calling the *push* method will internally call `signal.mutate()` with a function that executes the push. ### mapSignal Creates a signal whose input value is immediately mapped to a different value based on a selector. Either a value or multiple signals can be passed and used in the selector function. ### sequenceSignal The Sequence Signal is useful for situations where you want to easily cycle between options. For example, if you want to toggle between true/false or a list of sizes. These are still writable signals so you can manually override the current value. There is also a special option to pass a cursor, which is similar to an iterator, but can be reset. There will probably be more functionality added later. ### timerSignal This is very similar to rxjs's *timer* operator. It will be have like setTimeout or interval depending on the parameters passed. The value of the timer is incremented after every "tick". ### tweenSignal This was directly inspired by Svelte's *tweened* function. When the signal value is change, the observed value slowly morphs over time. So if the original value was **1** and the next value was set to **5**, then the observed value will be something like *1*, *1.512*, *2.12*, *2.6553*, *3* over a set duration. ## Conventions ### SignalInput and ValueSource Many arguments are of type **SignalInput<T>** or **ValueSource<T>**. *SignalInput* can be either something that can be either converted to a signal with *toSignal*, a function that can be passed to *computed* or a regular old *signal*. The purpose of this is to make things just a bit more convenient. ### ValueSource A *ValueSource* is a *SignalSource* ***or a value***. The limiting factor here is that if you wanted to use a *SignalSource* as a value, then you'd have to wrap that in a *signal*. ```ts 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$); ``` ### Overloads Several generators that accept a traditional value and a *SignalInput* will have different return types. Those that accept a *SignalInput* will return a read only signal, whereas those with a traditional value will have methods to update the signal, though not necessarily the same as a *WritableSignal*. ### Injector All signal generators have an options parameter that accept injector. This is either because *effect* is needed sometimes or if you *toSignal* is used. ## Issues or Ideas? I'm just adding signals as I run into real life problems. Please add an issue if you have an idea or run into a technical difficulty.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：