如何正确在Angular父组件中更新子组件的Checkbox状态

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

@Component({
  selector: 'app-switcher',
  template: `
    <label class="switch">
      <input type="checkbox" [checked]="isChecked" (change)="onToggle()">
      <span class="slider round"></span>
    </label>
  `,
  styles: [`
    /* 样式代码省略，确保切换器外观正常 */
    .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); }
    .slider.round { border-radius: 34px; }
    .slider.round:before { border-radius: 50%; }
  `]
})
export class SwitcherComponent {
  @Input() isChecked: boolean = false;
  @Output() toggle = new EventEmitter<boolean>();

  onToggle() {
    // 子组件不直接改变自己的状态，而是通知父组件
    this.toggle.emit(!this.isChecked);
  }
}

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { SwitcherComponent } from './switcher/switcher.component';

// 模拟一个服务，用于异步获取数据
export const mockApiService = {
  getData: () => of(Math.random() > 0.5).pipe(delay(500)) // 模拟API调用，50%概率成功，延迟500ms
};

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, SwitcherComponent],
  template: `
    <h1>Angular Switcher Parent-Child Communication</h1>
    <p>Current state: {{ isChecked ? 'On' : 'Off' }}</p>
    <app-switcher [isChecked]="isChecked" (toggle)="toggleSwitcher($event)"></app-switcher>
  `,
})
export class App {
  isChecked: boolean = false; // 父组件维护的真实状态

  constructor() {}

  toggleSwitcher(newState: boolean) {
    console.log('User requested to toggle to:', newState);
    // 在父组件中调用异步服务
    mockApiService.getData().subscribe((apiResult: boolean) => {
      console.log('API call result:', apiResult);
      if (apiResult) {
        // 如果API调用成功，则更新父组件的状态
        this.isChecked = newState;
        console.log('State updated to:', this.isChecked);
      } else {
        // 如果API调用失败，状态保持不变
        console.log('API call failed, state remains:', this.isChecked);
      }
    });
  }
}

bootstrapApplication(App);

  toggleSwitcher(newState: boolean) {
    // 模拟异步操作
    mockApiService.getData().subscribe((apiResult: boolean) => {
      if (apiResult) {
        // 使用setTimeout包裹状态更新，强制Angular在下一个微任务周期重新检测
        setTimeout(() => {
          this.isChecked = newState;
        });
      }
    });
  }