Angular服务中Getter方法与Signal的computed对比及视图更新疑问

问题描述 #

我在一个使用Signal管理状态的Angular项目中，原本通过Getter方法在视图中获取数据，现在想改用Signal的computed()方法，让视图能够自动获取数据变更后的最新值。我进行了如下尝试，但不确定是否正确：

我的尝试代码 #

服务层（UserService） #

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor() { }

  firstName = signal('Pial');
  lastName = signal('Noman');

  fullName = computed(() => this.firstName() + " " + this.lastName());
}

更新组件（UpdateUserComponent） #

import { Component, inject } from '@angular/core';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-update-user',
  standalone: true,
  imports: [],
  templateUrl: './update-user.component.html',
  styleUrl: './update-user.component.css'
})
export class UpdateUserComponent {
  userService = inject(UserService);

  firstName = this.userService.firstName();
  lastName = this.userService.lastName();

  updateUserName(e: any, firstName: string, lastName: string) {
    e.preventDefault();
    this.userService.firstName.set(firstName);
    this.userService.lastName.set(lastName);
  }
}

展示组件（Com2Component） #

import { Component, inject } from '@angular/core';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-com-2',
  standalone: true,
  imports: [],
  templateUrl: './com-2.component.html',
  styleUrl: './com-2.component.css'
})
export class Com2Component {
  userService = inject(UserService);

  fullName = this.userService.fullName();
}

问题分析与修正方案 #

你的代码存在一个关键问题：在组件中直接调用signal()或computed()并赋值给变量（比如firstName = this.userService.firstName()），这只会获取初始值，后续Signal更新时，这些变量不会自动同步最新值。

要让视图实时响应Signal的变更，需要保留对Signal本身的引用，而不是调用后的静态值：

修正后的组件代码 #

UpdateUserComponent 修正版

import { Component, inject } from '@angular/core';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-update-user',
  standalone: true,
  imports: [],
  templateUrl: './update-user.component.html',
  styleUrl: './update-user.component.css'
})
export class UpdateUserComponent {
  userService = inject(UserService);

  // 直接引用Signal，而非调用后的初始值
  firstNameSignal = this.userService.firstName;
  lastNameSignal = this.userService.lastName;

  updateUserName(e: any, firstName: string, lastName: string) {
    e.preventDefault();
    this.userService.firstName.set(firstName);
    this.userService.lastName.set(lastName);
  }
}

对应的模板（update-user.component.html）中，需要调用Signal获取值：

<form (submit)="updateUserName($event, firstNameInput.value, lastNameInput.value)">
  <input #firstNameInput [value]="firstNameSignal()" placeholder="First Name">
  <input #lastNameInput [value]="lastNameSignal()" placeholder="Last Name">
  <button type="submit">Update</button>
</form>

Com2Component 修正版

import { Component, inject } from '@angular/core';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-com-2',
  standalone: true,
  imports: [],
  templateUrl: './com-2.component.html',
  styleUrl: './com-2.component.css'
})
export class Com2Component {
  userService = inject(UserService);

  // 直接引用computed Signal，而非调用后的初始字符串
  fullNameSignal = this.userService.fullName;
}

对应的模板（com-2.component.html）中调用Signal：

<p>Full Name: {{ fullNameSignal() }}</p>

原理说明 #

• Angular的Signal是响应式值容器，只有当你在模板或effect()中调用Signal（即signal()）时，Angular才会追踪其依赖关系，在值变更时自动更新视图。
• computed()返回的是一个只读Signal，它会自动依赖其内部使用的Signal，当依赖的Signal更新时，computed Signal也会自动重新计算值，只要在模板中调用它，就能实时展示最新结果。

内容的提问来源于stack exchange，提问作者Awronno Adhar