如何将Angular Signal的值重置为默认值？

在Angular 18中重置Signal到初始值的核心思路是预先保存初始值，之后通过Signal的set()方法恢复该值，针对不同类型的初始值，具体实现略有区别：

1. 基本类型初始值（数字、字符串、布尔等） #

直接将初始值定义为常量，重置时调用set()方法传入该常量即可：

import { signal } from '@angular/core';
import { Component } from '@angular/core';

// 定义初始值常量
const INITIAL_COUNT = 0;

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>当前计数：{{ count() }}</p>
    <button (click)="increment()">+1</button>
    <button (click)="reset()">重置</button>
  `
})
export class CounterComponent {
  // 用初始值创建Signal
  count = signal(INITIAL_COUNT);

  increment() {
    this.count.update(val => val + 1);
  }

  reset() {
    // 重置为初始值
    this.count.set(INITIAL_COUNT);
  }
}

2. 动态初始值（如从输入属性/服务获取） #

如果初始值是动态获取的（比如组件输入属性），需要在组件初始化时保存初始值到变量，后续重置时使用该变量：

import { signal, Input, OnInit, Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-value',
  standalone: true,
  template: `
    <p>当前值：{{ dynamicVal() }}</p>
    <button (click)="modifyValue()">修改值</button>
    <button (click)="reset()">重置</button>
  `
})
export class DynamicValueComponent implements OnInit {
  @Input() initialVal!: number;
  private savedInitialVal!: number;
  dynamicVal = signal(0);

  ngOnInit() {
    // 初始化时保存动态获取的初始值
    this.savedInitialVal = this.initialVal;
    this.dynamicVal.set(this.savedInitialVal);
  }

  modifyValue() {
    this.dynamicVal.update(val => val * 2);
  }

  reset() {
    this.dynamicVal.set(this.savedInitialVal);
  }
}

3. 引用类型初始值（对象、数组） #

引用类型的初始值需要注意深拷贝，避免原初始值被修改导致重置失效。可以使用structuredClone API或自定义深拷贝函数：

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

// 初始对象
const INITIAL_USER = { name: '张三', age: 25 };

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    <p>姓名：{{ user().name }}，年龄：{{ user().age }}</p>
    <button (click)="increaseAge()">年龄+1</button>
    <button (click)="reset()">重置</button>
  `
})
export class UserProfileComponent {
  // 深拷贝保存初始值，防止引用污染
  private savedInitialUser = structuredClone(INITIAL_USER);
  // 创建Signal时也用深拷贝后的初始值
  user = signal(structuredClone(INITIAL_USER));

  increaseAge() {
    this.user.update(u => ({ ...u, age: u.age + 1 }));
  }

  reset() {
    // 重置时再次深拷贝，避免后续修改影响保存的初始值
    this.user.set(structuredClone(this.savedInitialUser));
  }
}

关键注意点 #

• 基本类型直接保存初始值即可，无需担心引用问题
• 引用类型必须使用深拷贝保存初始值，否则修改Signal的值会同时改变保存的初始值，导致重置无效
• 始终使用Signal的set()方法来重置值，不要直接修改Signal的内部状态

内容的提问来源于stack exchange，提问作者Hansana Prabath