Angular 12如何检测对象属性值变更 实现未保存修改提醒

你现有代码存在的第一个核心问题：直接将originalUser赋值为接口返回的user属于引用传递，两个变量指向同一块内存地址，修改user的属性时originalUser也会同步变化，无法作为比对基准，需要先改为深拷贝存储原始值。

以下提供两种适配你现有模板驱动表单的实现方案： #

方案1：计算属性实时比对（最简单，适合字段少的场景） #

第一步：修正深拷贝逻辑 #

修改ngOnInit中的赋值代码：

this.userService.get(userId).subscribe(user => {
  this.user = user;
  // 深拷贝原始值作为比对基准，简单场景用JSON序列化，复杂对象建议用lodash.cloneDeep
  this.originalUser = JSON.parse(JSON.stringify(user));
  this.isLoading = false;
});

第二步：添加计算属性做对象比对 #

在组件类中新增计算属性和比对逻辑：

// 实时计算是否有未保存变更
get hasUnsavedChanges(): boolean {
  // 简单场景直接序列化比对，属性包含Date、特殊类型时替换为自定义对象比对函数
  return JSON.stringify(this.user) !== JSON.stringify(this.originalUser);
}

// 自定义比对函数示例，兼容特殊属性场景
// private isEqual(a: User, b: User): boolean {
//   return Object.keys(a).every(key => a[key as keyof User] === b[key as keyof User]);
// }
// get hasUnsavedChanges(): boolean {
//   return !this.isEqual(this.user, this.originalUser);
// }

第三步：模板中添加提示 #

直接用计算属性控制提示显隐：

<!-- 放在表单顶部/底部即可 -->
<div *ngIf="hasUnsavedChanges" class="alert alert-warning">
  检测到未保存更改
</div>

方案2：事件触发比对（性能更好，适合字段多的场景） #

如果不想每次Angular脏检测都执行比对逻辑，可以在输入变更时主动触发检查：

第一步：新增状态变量和检查方法 #

isChanged = false;

checkChanges(): void {
  this.isChanged = JSON.stringify(this.user) !== JSON.stringify(this.originalUser);
}

第二步：给表单控件绑定ngModelChange事件 #

<input type="text" class="form-control" id="first-name" 
       name="first-name" placeholder="First Name" [(ngModel)]="user.firstName"
       (ngModelChange)="checkChanges()">

第三步：模板用isChanged控制提示显示 #

<div *ngIf="isChanged" class="alert alert-warning">
  检测到未保存更改
</div>

拓展优化建议 #

如果后续表单字段增多、校验逻辑变复杂，建议换成Angular响应式表单，自带变更监听能力：

• 可以直接监听表单的valueChanges observable 实时感知变更
• 自带dirty、touched等原生状态，不用手动做对象比对
• 更适合复杂表单的状态管理

内容的提问来源于stack exchange，提问作者Nicke Manarin