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：boolean;'到'isActionComplete = true;'它在父组件中确实改变了子布尔值的状态，但出于某种原因，当它在'deleteUser'函数中时它不起作用。

请有人让我知道我哪里出错？

由于

Answer 1

属性绑定的Synatx是[prop]="value"

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

你需要移动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);
  }

希望将来帮助某人！

Angular 2父对子函数中的布尔值

2 个答案: