首页 > 文章 > 前端

使用 NgRx 的 signalMethod 增强 Angular 的副作用

时间：2025-01-22 08:22:05 150浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《使用 NgRx 的 signalMethod 增强 Angular 的副作用》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

NgRx 一直是 Angular 应用状态管理的可靠库。随着 Signals API 的问世，开发者可以使用更简洁的方式处理状态变更和副作用。为处理这些副作用，NgRx 团队近期推出了 signalMethod，它简化了响应式工作流程，使其更直观易用。

本文将深入探讨 signalMethod，通过实际示例展示其工作原理，以及为何它是 Angular 工具包的绝佳补充。

`signalMethod` 的作用

signalMethod 是 NgRx 引入的一个实用程序，允许以简洁、响应式的方式管理副作用。不同于依赖 RxJS 运算符或手动管理副作用的传统方法，signalMethod 让您专注于核心逻辑：处理变更。

它通过将信号与处理器函数结合来实现这一点。该函数对输入的变更做出反应，无论输入是静态值还是响应式信号。最终实现了一种灵活且强大的方式来处理状态驱动的操作。

配置信号驱动的操作

让我们从一个简单的例子开始：每当数值翻倍时记录一条消息。以下是使用 signalMethod 实现的方法：

import { Component } from '@angular/core';
import { signal, signalMethod } from '@ngrx/signals';

@Component({
  selector: 'app-math-logger',
  template: `Increment`
})
export class MathLoggerComponent {
  private counter = signal(1);

  // 定义 signalMethod
  readonly logDoubledValue = signalMethod<number>((value) => {
    const doubled = value * 2;
    console.log(`Doubled value: ${doubled}`);
  });

  increment() {
    this.counter.set(this.counter() + 1);
    this.logDoubledValue(this.counter);
  }
}

此处，每当调用 increment 方法时，logDoubledValue 都会被调用。计数器的值传递给 signalMethod，然后记录其双倍值。此示例展示了 signalMethod 与信号集成以响应状态变化是多么容易。

动态响应信号

假设您正在开发一个温度监控系统。如果温度超过阈值，您需要提醒用户，而不是记录双倍值。使用 signalMethod，这很容易实现：

@Component({
  selector: 'app-temperature-monitor',
  template: `Increase Temperature`
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // 从 20°C 开始

  readonly alertHighTemperature = signalMethod<number>((temp) => {
    if (temp > 30) {
      console.warn('Warning: High temperature detected!');
    }
  });

  increaseTemperature() {
    this.temperature.set(this.temperature() + 5);
    this.alertHighTemperature(this.temperature);
  }
}

每次温度升高时，alertHighTemperature 方法都会评估新值，并在温度过高时发出警告。

控制服务的清理

在某些情况下，您可以在服务中定义 signalMethod，而不是直接在组件中定义。这可以提高代码复用性，但需要仔细管理副作用以避免内存泄漏。

这是一个例子：

import { Injectable } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly logScore = signalMethod<number>((score) => {
    console.log(`Current score: ${score}`);
  });
}

现在，假设一个组件使用此服务：

@Component({
  selector: 'app-score-tracker',
  template: `Update Score`
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score); // 信号驱动的操作
  }
}

为了防止内存泄漏，请确保在动态场景中使用服务时注入组件的上下文：

import { Injector } from '@angular/core';

@Component({ /* ... */ })
export class ScoreTrackerComponent {
  private injector = inject(Injector);
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score, { injector: this.injector });
  }
}