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

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

export const mockApiService = {
  /**
   * 模拟API调用，随机返回true或false
   * @returns Observable<boolean>
   */
  getData: () => of(Math.random() > 0.5 ? true : false).pipe(delay(500))
};

// main.ts (父组件)
import { Component } from '@angular/core';
import { mockApiService } from './service'; // 引入模拟服务

@Component({
  selector: 'app-root',
  template: `
    <app-switcher [checked]="isChecked" (toggle)="toggleSwitcher($event)"></app-switcher>
    <p>当前状态: {{ isChecked ? '开' : '关' }}</p>
  `,
})
export class MainComponent {
  isChecked = false; // 父组件的内部状态，绑定到子组件的@Input

  /**
   * 处理子组件的切换事件
   * @param event 子组件发出的当前切换状态
   */
  toggleSwitcher(event: boolean) {
    console.log('父组件接收到切换请求:', event);
    // 在API调用成功后，才更新父组件的isChecked状态
    mockApiService.getData().subscribe((res: boolean) => {
      console.log('API响应:', res);
      if (res) {
        // 如果API返回成功，则切换isChecked状态
        this.isChecked = !this.isChecked;
        console.log('父组件状态更新为:', this.isChecked);
      } else {
        console.log('API返回失败，状态保持不变。');
      }
    });
  }
}

// switcher.component.ts (子组件)
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-switcher',
  template: `
    <label class="switch">
      <input type="checkbox" [checked]="checked" (change)="onToggle()">
      <span class="slider round"></span>
    </label>
  `,
  styles: [`
    /* 样式代码省略，以保持简洁 */
  `]
})
export class SwitcherComponent {
  @Input() checked: boolean = false; // 从父组件接收状态
  @Output() toggle = new EventEmitter<boolean>(); // 向父组件发出切换事件

  /**
   * 处理内部复选框的change事件
   */
  onToggle() {
    // 子组件不直接改变自己的checked状态，而是通知父组件
    this.toggle.emit(!this.checked);
  }
}

// main.ts (父组件 - 使用setTimeout的示例)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-switcher [checked]="isChecked" (toggle)="toggleSwitcher($event)"></app-switcher>
    <p>当前状态: {{ isChecked ? '开' : '关' }}</p>
  `,
})
export class MainComponent {
  isChecked = false;

  toggleSwitcher(e: boolean) {
    // 模拟异步操作后更新状态
    // 注意：此方法通常作为调试或特定场景下的备选方案
    setTimeout(() => {
      this.isChecked = !this.isChecked;
      console.log('通过setTimeout更新状态:', this.isChecked);
    }, 500); // 模拟500ms的延迟
  }
}