在Angular中从父组件异步更新子组件复选框状态的策略

// src/app/data.service.ts
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

export const dataService = {
  // 模拟一个API调用，根据当前状态决定是否成功切换
  // 这里简化为总是返回与当前状态相反的布尔值，模拟成功切换
  // 实际项目中，API可能会返回成功/失败状态
  getData: (currentStatus: boolean) => of(!currentStatus)
                                      .pipe(delay(500)) // 模拟500ms的网络延迟
};

// src/app/switcher/switcher.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-switcher',
  template: `
    <label class="switch">
      <!-- [checked] 绑定到 @Input 的 isChecked 属性 -->
      <!-- (change) 事件通知父组件用户意图 -->
      <input type="checkbox" [checked]="isChecked" (change)="onChange()">
      <span class="slider round"></span>
    </label>
  `,
  styleUrls: ['./switcher.component.css'] // 引用样式文件
})
export class SwitcherComponent {
  @Input() isChecked: boolean = false; // 从父组件接收的选中状态
  @Output() toggle = new EventEmitter<boolean>(); // 向父组件发出切换意图

  onChange() {
    // 发出用户希望切换到的新状态（当前状态的反面）
    // 子组件不自行改变 isChecked 的值
    this.toggle.emit(!this.isChecked);
  }
}

/* src/app/switcher/switcher.component.css */
/* 简单的开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { dataService } from './data.service'; // 导入模拟服务

@Component({
  selector: 'app-root',
  template: `
    <h1>父组件</h1>
    <p>当前状态: {{ isChecked ? 'ON' : 'OFF' }}</p>
    <!-- 绑定子组件的 isChecked 和 toggle 事件 -->
    <app-switcher [isChecked]="isChecked" (toggle)="onSwitcherToggle($event)"></app-switcher>
    <p *ngIf="isLoading">正在更新中...</p>
  `,
})
export class AppComponent {
  isChecked: boolean = false; // 父组件维护的实际状态
  isLoading: boolean = false; // 用于显示加载状态

  onSwitcherToggle(intendedNewState: boolean) {
    console.log('用户点击开关，期望新状态:', intendedNewState);
    this.isLoading = true; // 显示加载状态

    // 调用模拟API服务
    dataService.getData(this.isChecked).subscribe(
      (apiResponseSuccess: boolean) => {
        console.log('API响应成功:', apiResponseSuccess);
        if (apiResponseSuccess) {
          // 只有当API响应成功时，才更新父组件的 isChecked 状态
          this.isChecked = intendedNewState;
          console.log('状态已更新为:', this.isChecked);
        } else {
          // API返回失败或不允许切换，状态保持不变
          console.log('API操作失败，状态保持不变:', this.isChecked);
        }
        this.isLoading = false; // 隐藏加载状态
      },
      (error) => {
        console.error('API调用出错:', error);
        // 处理错误情况，例如显示错误消息，状态保持不变
        this.isLoading = false; // 隐藏加载状态
      }
    );
  }
}

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SwitcherComponent } from './switcher/switcher.component'; // 导入SwitcherComponent

@NgModule({
  declarations: [
    AppComponent,
    SwitcherComponent // 声明SwitcherComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }