--- theme: channing-cyan --- ## [Signals • Overview • Angular](https://angular.dev/guide/signals) ### Signal是什么 Angular 从 16 开始，引入了 signal。 > Angular Signals 是一个信号体系，能够细粒度地跟踪你的状态在整个应用中的使用方式和位置，从而使框架能够优化更新频率。翻译成白话来说就是Signal可以定义一个状态，Angular会知道这个状态在系统中所有被使用的位置，当这个状态变化的时候，会更新页面。 ### Signal都有哪些功能 #### 基础使用默认情况下 `Signal` 的类型是 `WritableSignal`，也就是可写的 `Signal`。 ```ts const count: WritableSignal = signal(0); // Signals are getter functions - calling them reads their value. console.log('The count is: ' + count()); // Output 0 // Setting the value directly count.set(1); // Output 1 // update by prev value count.update(value => value + 1); // Output 2 ``` #### 定义只读的 Signal 通过 `asReadonly()` 可以定义 signal 为只读的，此时 `Signal` 的类型为 `Signal`, 它没有 `set` 和 `update` 属性，无法修改值。 ```js readonly pageSize = signal(10).asReadonly(); ``` Or ```ts readonly pageSize:Signal; constructor() { // You can get value from other sync code this.pageSize = signal(value).asReadonly(); } ``` 如果你需要从某个异步操作的结果设置默认值, 就只能放弃 readonly 修饰符。 ```ts pageSize!: Signal; constructor() { Promise.resolve().then(() => { this.pageSize = signal(10).asReadonly(); }); } ``` 这种写法，你同样无法调用 `this.pageSize` 的 `set` 和 `update` 方法更新值，但是无法避免在代码中直接修改 `pageSize` 为新的 `signal` 对象，这点比较难受。 ```ts /// 在 xxx function 内部直接修改引用 this.pageSize = signal(10).asReadonly(); ``` #### 自定义 Compare 函数你可以自定义一个返回 bool 值的函数，它会被用于检查新旧值是否不同。 ```ts data = signal( { id: 1, name: 'zhangsan' }, { equal: (prev, cur): boolean => { return prev.id === cur.id; }, } ); ``` 上面的例子中，只要对象的 `id` 是不变的，那么 Angular 就会始终认为 data 没有发生变化。默认情况下，Angular 只会比较引用是否相等。 #### 计算属性 Computed ```ts const count: WritableSignal = signal(0); const doubleCount: Signal = computed(() => count() * 2); ``` 当 `count` 变化时，`angular` 会自动更新 `doubleCount`, 并且计算属性是只读的。计算属性是惰性并且支持缓存的，当你访问 `doubleCount` 时，计算函数才会被执行，并且缓存执行结果，在`count` 值不发生变化的前提下，后续访问 `doubleCount` 都会直接返回之前缓存的值。计算属性还会**根据代码逻辑动态推导**应该追踪哪个 `signal`，在下面的例子中， * 如果 `showCount` 的初始值为 true，那么逻辑会读取 `count` 的值，把 `count` 也标记成依赖项，此时当 `showCount` 和 `count`变化时，都会导致缓存的值无效，从而触发 `conditionalCount` 被重新计算. * 如果 `showCount` 的初始值为 false，代码逻辑不会读取 `count`, 即使 `count` 值发生变化，也不会触发 `conditionalCount` 重新计算。 * 如果刚开始为 true，`count`会被标记为依赖项，之后如果把 `showCount` 的值修改为 false，那么 `count` 将被移出依赖项，依赖项是动态推导的。 ```ts const showCount = signal(false); const count = signal(0); const conditionalCount = computed(() => { if (showCount()) { return `The count is ${count()}.`; } else { return 'Nothing to see here!'; } }); ``` **我们应该尽量使用 `computed` 替换 `getter`** 因为 `compute` 有缓存机制，而 `getter` 没有。而且你很难知道 `getter` 的依赖关系何时发生变化，`Signal` 则要求你显式的更新状态（call `set()` or `update()`）。 #### Effects 每当一个或多个依赖的信号值发生变化时， `Effects` 都会被调用，与 `computed` 一样，它会动态跟踪依赖关系。但 `effects` 至少会运行一次（在初始化阶段）。默认情况下，您只能在注入上下文（您可以访问注入函数）中创建 effect()。满足此要求的最简单方法是在组件、指令或服务构造函数中调用 effect ```ts @Component({...}) export class EffectiveCounterComponent { readonly count = signal(0); constructor() { // Register a new effect. effect(() => { console.log(`The count is: ${this.count()}`); }); } } ``` 另外你还可以给 `effects` 分配一个属性 ```ts @Component({...}) export class EffectiveCounterComponent { readonly count = signal(0); private loggingEffect = effect(() => { console.log(`The count is: ${this.count()}`); }); } ``` 除此之外，如果需要在构造函数之外创建 `effects`，可以通过配置传递 `Injector` 给 `effects` ```ts @Component({...}) export class EffectiveCounterComponent { readonly count = signal(0); constructor(private injector: Injector) {} initializeLogging(): void { effect(() => { console.log(`The count is: ${this.count()}`); }, {injector: this.injector}); } } ``` 你创建的 `effects` 会随着组件被销毁时一起被销毁，如果你想要手动控制，可以使用 `.destroy()`手动销毁。 **`untracked`** 如果你不想某个信号被追踪，可以使用 `untracked` 包裹它，这样即使该信号的值发生变化，也不会触发 `effect` 调用。 ```ts effect(() => { console.log(`User set to ${currentUser()} and the counter is ${untracked(counter)}`); }); effect(() => { const user = currentUser(); untracked(() => { // If the `loggingService` reads signals, they won't be counted as // dependencies of this effect. this.loggingService.log(`User set to ${user}`); // The counter will not be tracked. console.log(`User set to ${user} and the counter is ${counter()}`); }); }); ``` **cleanup** 创建 `effects` 时，函数可以选择接受 `onCleanup` 函数作为其第一个参数。此 `onCleanup` 函数允许您注册一个回调，该回调在 `effects` 被销毁时调用。 ```ts effect((onCleanup) => { const user = currentUser(); const timer = setTimeout(() => { console.log(`1 second ago, the user became ${user}`); }, 1000); onCleanup(() => { clearTimeout(timer); }); }); ``` **`effects` 的使用场景** > * 记录显示的数据及其变化情况，用于分析或作为调试工具。 > * 保持数据与 window\.localStorage 同步。 > * 添加无法用模板语法表达的自定义 DOM 行为。 > * 对

Hello, {{user.name}}