Angular信号式输入变更检测：ngOnChanges是否适用？最佳实践探讨

我有一个组件，接收user和userList两个输入，已采用Angular信号式输入写法（代码如下）。目前使用ngOnChanges生命周期钩子检测输入变更且运行正常，但不确定该方式是否适用于信号式组件，想了解此类场景下的最佳实践。

// Note: Old approach
// @Input() user: User; // For editing a user
// @Input({ alias: "userList" }) _userList: User[] = [];
// @Output() addUser = new EventEmitter<User>();

// Note: New approach
user = input<User>();
_userList = input<User[]>([], { alias: "userList" });
addUser = output<User>();

constructor(private userService: UserService) { }

ngOnInit(): void {
  this.getRoleList();
}

ngOnChanges(changes: SimpleChanges): void {
  const { user, _userList } = changes;
  console.log(changes);

  if (user && user.currentValue) {
    this.userModel = user.currentValue;
    this.initializeForm(user.currentValue);
  }

  if (_userList) {
    this.userList.set(_userList.currentValue);
  }
}

最佳实践说明 #

虽然ngOnChanges在信号式组件中暂时可以运行，但这并不是Angular推荐的信号式开发范式。信号本身设计为自带响应式变更通知，完全可以替代ngOnChanges的功能，同时让代码更简洁、符合响应式思维。

1. 用effect监听输入信号的变更 #

对于需要在输入变更时执行副作用（比如初始化表单、更新本地状态）的场景，直接使用Angular的effect函数监听信号即可：

import { input, output, effect, signal } from '@angular/core';

// ... 其他代码
user = input<User>();
_userList = input<User[]>([], { alias: "userList" });
addUser = output<User>();

userModel = signal<User | undefined>(undefined);
userList = signal<User[]>([]);

constructor(private userService: UserService) {
  // 监听user信号变更
  effect(() => {
    const currentUser = this.user();
    if (currentUser) {
      this.userModel.set(currentUser);
      this.initializeForm(currentUser);
    }
  });

  // 监听_userList信号变更
  effect(() => {
    const currentList = this._userList();
    this.userList.set(currentList);
  });
}

ngOnInit(): void {
  this.getRoleList();
}

2. 直接在模板或计算信号中使用输入信号 #

如果只是需要在模板中展示输入值，或者基于输入值衍生新状态，完全不需要额外的状态同步，直接使用信号的调用语法即可：

• 在模板中直接绑定：

<!-- 直接使用输入信号的值 -->
<div *ngIf="user()">当前编辑用户：{{ user().name }}</div>
<ul>
  <li *ngFor="let item of _userList()">{{ item.name }}</li>
</ul>

• 用计算信号衍生状态：

// 示例：过滤出激活状态的用户
activeUsers = computed(() => {
  return this._userList().filter(user => user.isActive);
});

3. 为什么不推荐用ngOnChanges？ #

• ngOnChanges是基于变更检测的旧生命周期钩子，和信号式响应式系统设计理念不同，混用会增加代码复杂度。
• ngOnChanges只能获取批量变更集合，无法精准监听单个输入的每次变更（多次变更可能合并成一次调用），而effect会对信号的每次变更做出响应。
• 信号式写法符合Angular未来发展方向，后续版本可能会对信号式组件的生命周期钩子做调整，依赖旧钩子存在潜在兼容性风险。

内容的提问来源于stack exchange，提问作者Sepehr-Aghdasi