Angular 2父组件向子组件传递布尔值失败问题求助

嘿，我一眼就瞅出问题根源啦！你在父组件的deleteUser方法里犯了个小错误——同步代码的执行顺序把isActionComplete的状态给"覆盖"了，导致子组件根本没机会接收到true的值。

问题到底出在哪？ #

你看，在deleteUser里，你先写了this.isActionComplete = true，但紧接着同步执行了this.isActionComplete = false，而setTimeout里的代码是异步延迟3秒才跑的。Angular的变更检测只会在当前同步代码块全部执行完后才触发，这时候isActionComplete已经变回false了，子组件当然看不到true的状态啦！

简单修复方案 #

把this.isActionComplete = false移到setTimeout的回调函数里就行，这样就能保证先让子组件拿到true的值显示内容，3秒后再把状态改回false。

修改后的父组件代码：

isActionComplete: boolean;
deleteUser() { 
  this.userService.delete(); 
  this.isActionComplete = true; // 先把状态设为true，让子组件显示内容
  setTimeout(() => { 
    this.isPopUpActive = false; 
    this.isActionComplete = false; // 延迟3秒后再重置状态
  }, 3000); 
}

额外小提示（如果用了OnPush检测策略） #

要是你的子组件设置了ChangeDetectionStrategy.OnPush，那可能还得手动触发变更检测。这时候在子组件里注入ChangeDetectorRef，然后在ngOnChanges里标记需要检测：

import { Component, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PopUpComponent implements OnChanges {
  @Input() isActionComplete: boolean;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['isActionComplete']) {
      this.cdr.markForCheck();
    }
  }
}

不过要是没用到OnPush，前面的核心修复就完全够用啦！

内容的提问来源于stack exchange，提问作者DBoi