angular - parent 与 child 之间的沟通问题 - Angular 6

Question

我正在尝试根据子输出对父组件执行操作，但我得到了

Expression has changed after it was checked. Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: true'.

这是我的代码:

父组件 html

<div *ngIf="hasErrors">!</div>
<app-error [valuesForErrors]="..." (hasErrors)="setHasErrors($event)"></app-error>

父组件 ts(部分)

export class InputComponent implements OnInit {
    hasErrors = false;
    ...
    setHasErrors(hasErrors) {
        this.hasErrors = hasErrors;
    }

我从 rxjs 看到了一些使用 Subject 和 Observable 的解决方案，但它们在我的项目中不起作用:/

编辑

一位 friend 帮我提供了另一种解决方案，只需在声明中使用 true 使发射器异步即可:

子组件 ts

export class ErrorComponent implements OnInit, OnChanges {
    @Input() valuesForErrors: any;
    @Output() hasErrors: EventEmitter<boolean> = new EventEmitter<boolean>(true);
    ...
    ngOnChanges(changes: SimpleChanges): void {
        this.calculateErrors()
    }

    calculateErrors() {
        let errors = ... some logic that returns a boolean;
        this.hasErrors.emit(errors);
    }
}

Answer 1

你有没有想过这个世界是否只是为了得到你？

嗯，有时候这是真的。您遇到了 Angular 抛出的最讨厌的行为之一。

通常，大约 95% 的时间，ExpressionChangedAfterItHasBeenCheckedError基本上是 Angular 告诉您您不了解生命周期检测的基础知识:ngOnChanges vs ngOnInit vs ngAfterViewInit。但有时这是因为嵌套和模板层次结构以及在您的模板中进行的顺序检查。

采取以下抛出错误的方式:

<form [name]="formName"
      [formGroup]="formGroup">
  <div *ngIf="true">
    <input formControlName="name"
           required
           placeholder="Please enter you name">
  </div>
</form>
<div *ngIf="formGroup.valid">
  Name is required.
</div>

引发错误的原因是变更检测在评估输入的有效性之前首先评估错误 div 的 *ngIf，因为输入在模板层次结构方面较低一级。

解决方法是通过添加另一个 <div *ngIf="true"></div> 将错误 div 带到与输入相同的级别围绕它(如上所述)。

Not all heros wear capes, some leave Github comments