Angular中基于mat-slide-toggle初始状态变更控制Save按钮显示/禁用的实现方法

我来帮你搞定这个需求！这种跟踪控件状态变化、动态控制保存按钮显示的场景在Angular项目里太常见了，咱们一步步来实现：

1. 先保存所有toggle的初始状态 #

页面加载完成后，我们需要把每个mat-slide-toggle的初始状态存起来，这样后续才能对比是否有修改。

方式一：如果是循环生成的toggle列表 #

假设你是从一个数组循环渲染toggle，比如：

// 组件类中定义toggle数据
toggleList = [
  { id: 'toggle1', label: '选项1', checked: false },
  { id: 'toggle2', label: '选项2', checked: true },
  { id: 'toggle3', label: '选项3', checked: false }
];

// 用于存储初始和当前状态
initialToggleStates: { [key: string]: boolean } = {};
currentToggleStates: { [key: string]: boolean } = {};
showSaveBtn = false;

ngOnInit(): void {
  // 页面加载时保存初始状态
  this.toggleList.forEach(toggle => {
    this.initialToggleStates[toggle.id] = toggle.checked;
    this.currentToggleStates[toggle.id] = toggle.checked;
  });
}

方式二：如果是手动写的单个toggle #

如果toggle是逐个写在模板里的，可以用@ViewChildren获取所有实例：

import { ViewChildren, QueryList, OnInit } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

export class YourComponent implements OnInit {
  @ViewChildren(MatSlideToggle) toggles!: QueryList<MatSlideToggle>;
  
  initialToggleStates: { [key: string]: boolean } = {};
  currentToggleStates: { [key: string]: boolean } = {};
  showSaveBtn = false;

  ngOnInit(): void {
    this.toggles.forEach(toggle => {
      // 用toggle的id作为唯一标识
      this.initialToggleStates[toggle.id] = toggle.checked;
      this.currentToggleStates[toggle.id] = toggle.checked;
    });
  }
}

2. 监听toggle的状态变化 #

给每个mat-slide-toggle绑定change事件，每次状态改变时更新当前状态，然后对比初始状态判断是否要显示保存按钮。

模板代码 #

<!-- 循环生成的toggle -->
<mat-slide-toggle 
  *ngFor="let toggle of toggleList"
  [id]="toggle.id"
  [(ngModel)]="toggle.checked"
  (change)="onToggleChange(toggle.id, toggle.checked)">
  {{toggle.label}}
</mat-slide-toggle>

<!-- 手动写的单个toggle -->
<mat-slide-toggle id="toggle1" [(ngModel)]="toggle1Checked" (change)="onToggleChange('toggle1', toggle1Checked)">
  选项1
</mat-slide-toggle>

<!-- 初始隐藏的Save按钮 -->
<button mat-raised-button color="primary" *ngIf="showSaveBtn">
  SAVE
</button>

组件中的事件处理 #

onToggleChange(toggleId: string, newState: boolean): void {
  // 更新当前状态
  this.currentToggleStates[toggleId] = newState;
  // 检查是否有状态变化
  this.checkChanges();
}

checkChanges(): void {
  // 对比当前状态和初始状态，只要有一个不一样就显示按钮
  const hasModified = Object.keys(this.initialToggleStates).some(key => {
    return this.currentToggleStates[key] !== this.initialToggleStates[key];
  });
  this.showSaveBtn = hasModified;
}

3. 保存成功后的状态同步 #

当用户点击Save按钮并保存成功后，记得把当前状态更新为新的初始状态，这样后续再改回这个状态时，按钮会自动隐藏：

onSave(): void {
  // 这里写你的保存逻辑，比如调用后端API
  // ...

  // 保存成功后更新初始状态
  Object.assign(this.initialToggleStates, this.currentToggleStates);
  // 隐藏保存按钮
  this.showSaveBtn = false;
}

额外提示 #

• 确保每个mat-slide-toggle都有唯一的id，这样才能准确跟踪每个控件的状态
• 如果你的项目用了响应式表单，可以结合FormGroup的状态，但要注意pristine属性只要修改过就会变成false，即使改回初始值，所以还是手动对比初始值的方式更精准

内容的提问来源于stack exchange，提问作者ABHI SHAKTAWAT