Angular中父组件异步更新子组件复选框状态的实践指南

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

@Component({
  selector: 'app-switcher',
  template: `
    <label class="switch">
      <input type="checkbox" [checked]="isChecked" (change)="onToggle($event)">
      <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; transition: .4s; }
    .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
    input:checked + .slider { background-color: #2196F3; }
    input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
    input:checked + .slider:before { transform: translateX(26px); }
    .slider.round { border-radius: 34px; }
    .slider.round:before { border-radius: 50%; }
  `]
})
export class SwitcherComponent {
  @Input() isChecked: boolean = false; // 接收父组件传入的选中状态
  @Output() toggled = new EventEmitter<boolean>(); // 向父组件发出用户意图

  onToggle(event: Event): void {
    const target = event.target as HTMLInputElement;
    // 子组件不直接改变自己的状态，而是通知父组件用户希望改变的状态
    this.toggled.emit(target.checked);
  }
}

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

// 模拟一个服务来获取数据（例如API调用）
export const apiService = {
  getData: () => of(Math.random() > 0.5).pipe(delay(500)) // 50%的几率成功，延迟500ms
};

@Component({
  selector: 'app-root',
  template: `
    <h1>异步更新子组件复选框示例</h1>
    <p>当前状态: {{ isChecked ? '开启' : '关闭' }}</p>
    <app-switcher [isChecked]="isChecked" (toggled)="handleSwitcherToggle($event)"></app-switcher>
    <button (click)="forceUpdate()">强制更新（测试）</button>
  `
})
export class MainComponent {
  isChecked: boolean = false; // 父组件维护的真实状态

  handleSwitcherToggle(newIntentState: boolean): void {
    console.log('用户希望将状态改为:', newIntentState);

    // 模拟API调用
    apiService.getData().subscribe((apiResult: boolean) => {
      console.log('API调用结果:', apiResult);
      if (apiResult) {
        // 只有API调用成功时，才更新父组件的isChecked状态
        // 这会自动通过 @Input 更新子组件的 [isChecked] 绑定
        this.isChecked = newIntentState; // 假设API成功则采纳用户意图
        console.log('状态已更新为:', this.isChecked);
      } else {
        console.log('API调用失败，状态保持不变:', this.isChecked);
        // 如果API调用失败，父组件的isChecked状态保持不变，
        // 子组件的UI也会因为没有新的@Input更新而保持原样。
      }
    });
  }

  // 示例：一个不通过子组件触发的强制更新方法
  forceUpdate(): void {
    this.isChecked = !this.isChecked;
    console.log('通过父组件直接强制更新状态:', this.isChecked);
  }
}

toggleSwitcher(e: boolean) {
    // 模拟API调用...
    apiService.getData().subscribe((res: any) => {
        if (res) {
            setTimeout(() => {
                this.isChecked = e; // 在下一个微任务中更新状态
            });
        }
    });
}