Angular 2父子布尔函数

Question

我正在尝试从父组件向子组件发出布尔更改，但是没有运气。

父组件：

isActionComplete: boolean;

deleteUser() {
    this.userService.delete();
    this.isActionComplete = true;
    setTimeout(() => {
      this.isPopUpActive = false;
    }, 3000);
    this.isActionComplete = false;
  }

父html：

<app-pop-up [isActionComplete]="isActionComplete"></app-pop-up>

子组件：

@Input() isActionComplete: boolean;

子html：

<div *ngIf="isActionComplete">Complete</div>

如果我更改“ isActionComplete：布尔值；” 为'isActionComplete = true;' 在父组件中，它确实会更改子布尔值的状态，但是由于某种原因，当它在'deleteUser'函数中不起作用时，它会更改。

请有人让我知道我要去哪里错了吗？

谢谢

Answer 1

用于属性绑定的Synatx为[prop]="value"

<app-pop-up [isActionComplete]="isActionComplete"></app-pop-up>

您需要在setTimeout();移动最后一条语句setTimeout(); setTimeout()不会阻塞执行，而是将setTimeout中的方法或语句移至事件队列，并在超时和语句执行后同时执行该语句。

例：

method a();
setTimeout(()=>{method b()},0})
methhod c();

执行顺序为
a();
c();
b();

 deleteUser() {
        this.userService.delete();
        this.isActionComplete = true;
        setTimeout(() => {
          this.isPopUpActive = false;
         this.isActionComplete = false;
        }, 3000);

      }

Answer 2

我意识到我的问题是什么！ 是导致问题的setTimeout。 我需要在其中移动它：

deleteUser() {
    this.userService.delete();
    this.isActionComplete = true;
    setTimeout(() => {
      this.isPopUpActive = false;
      this.isActionComplete = false;
    }, 3000);
  }

希望这对以后的人有所帮助！