Проблемы в общении между родителем и ребенком - Angular 6

Question

Я пытаюсь воздействовать на родительский компонент на основе дочернего вывода, но получаю

Выражение изменилось после того, как оно было проверено. Предыдущее значение: 'ngIf: [объект объекта]'. Текущее значение: 'ngIf: true'.

Вот мой код:

Родительский компонент html

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

Родительский компонент ts (section)

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

Я видел несколько решений с Subject и Observable от rxjs, но они не работали над моим проектом: /

Edit

Друг помог мне дать другое решениепросто сделайте излучатель асинхронным с истинным значением в объявлении:

Дочерний компонент 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

Задумывались ли вы, если мир просто хочет вас достать?

Ну, иногда это правда. Вы столкнулись с одним из самых отвратительных поведений, которые бросают с помощью углов.

Обычно, как и в 95% случаев, ExpressionChangedAfterItHasBeenCheckedError в основном угловатый, говорит вам, что вы не понимаете основ обнаружения жизненного цикла: ngOnChanges против ngOnInit против 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>

Причина, по которой выдается ошибказаключается в том, что обнаружение изменений сначала оценивает * ngIf div ошибки, прежде чем оно оценивает достоверность ввода, поскольку входное значение на один уровень ниже с точки зрения иерархии шаблонов.

Обходной путь заключается в приведении div ошибки к тому жеуровень как вход, добавив еще один <div *ngIf="true"></div> вокруг него (как упомянуто выше).

Не все герои носят накидки, некоторые оставляют комментарии Github

Answer 2

Изменить родительский компонент следующим образом:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {  }


setHasErrors(hasErrors) {
    this.hasErrors = hasErrors;
    this.cd.detectChanges();
}