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);
  }

希望這對以后的人有所幫助！