优化Angular父组件异步更新子组件复选框状态的策略

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-switcher',
  template: `
    <label>
      <input type="checkbox" [checked]="checked" (change)="onToggle($event.target.checked)">
      <span>{{ label }}</span>
    </label>
  `,
  styles: [`
    label { display: flex; align-items: center; cursor: pointer; }
    input[type="checkbox"] { margin-right: 8px; }
  `]
})
export class SwitcherComponent {
  @Input() checked: boolean = false;
  @Input() label: string = 'Toggle Me';
  @Output() toggle = new EventEmitter<boolean>();

  onToggle(newCheckedState: boolean): void {
    // 即使子组件知道新的状态，也先通知父组件，由父组件决定是否更新
    this.toggle.emit(newCheckedState);
  }
}

import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  getData(): Observable<boolean> {
    // 模拟API调用，随机返回true/false，并延迟500ms
    return of(Math.random() > 0.5).pipe(delay(500));
  }
}

import { Component } from '@angular/core';
import { ApiService } from './api.service'; // 假设api.service.ts在同级目录

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular Switcher State Management</h1>
    <app-switcher [checked]="isChecked" (toggle)="handleToggle($event)" label="Feature Enabled"></app-switcher>
    <p>Current State (Parent): {{ isChecked ? 'ON' : 'OFF' }}</p>
  `
})
export class AppComponent {
  isChecked: boolean = false; // 父组件维护的真实状态

  constructor(private apiService: ApiService) {}

  handleToggle(attemptedState: boolean): void {
    console.log('User attempted to toggle to:', attemptedState);
    // 在API调用之前，不立即改变状态
    this.apiService.getData().subscribe(
      (apiResponse: boolean) => {
        console.log('API response:', apiResponse);
        if (apiResponse) {
          // 只有当API成功时，才更新父组件的isChecked状态
          // 这里的更新会触发Angular的变更检测，进而更新子组件的[checked] Input
          this.isChecked = !this.isChecked; // 根据API结果更新为相反的状态 (或直接设置为 attemptedState if API returns the final state)
          console.log('State updated to:', this.isChecked);
        } else {
          console.log('API failed, state remains:', this.isChecked);
        }
      },
      error => {
        console.error('API error:', error);
        // 处理错误，状态保持不变
      }
    );
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SwitcherComponent } from './switcher.component'; // 确保导入子组件

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