ExpressionChangedAfterItHasBeenCheckedError in Angular v4.3.0

Question

Ich habe einen Fehler ExpressionChangedAfterItHasBeenCheckedError. Plunk: http://plnkr.co/edit/XKfHDAzuhjAhVvbQOpsW?p=preview

ich eine Erklärung finden:

https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked 

Aber ich did't wissen, wie ich richtig Lösung für dieses Problem ohne SetTimeout in ngAfterViewInit machen sollte.

Das Problem ist mit dieser Variable message. + dasselbe Problem mit ngAfterViewChecked. Es gibt ein Update ohne BehaviorSubject?

Answer 1

Sie verwenden die message Eigenschaft der Child Komponente in der Vorlage:

@Component({ 
    selector: 'child-cmp', 
    template: ` 
    <div>{{ message }}<input></div>`, 
}) 
export class Child 

Schrägläufe Erkennung (Check) für die child Komponente ändern und aktualisieren den DOM. Dann erinnert es sich an den Wert, der zum Aktualisieren des DOM verwendet wurde. Dieser Wert wird während des Überprüfungsschritts verwendet, um zu überprüfen, ob sich die Bindungen nicht geändert haben. Das Problem besteht darin, dass Sie diesen Wert im Lebenszyklus-Hook ngAfterViewInit ändern, und dieser Hook wird ausgelöst, nachdem die Komponente child überprüft wurde. Wenn Angular die Überprüfung für die Komponente ausführt, bemerkt es, dass der Wert unterschiedlich ist. So wirft es den Fehler. Winkel erfordert einen zusätzlichen Änderungserkennungslauf zwischen der Prüf- und der Verifizierungsphase.

Wenn Sie wirklich den Wert im ngAfterViewInit Lifecycle Haken aktualisieren müssen, es für das Kind Komponente asynchron oder laufen Änderungserkennung verwenden. Beide sind schlecht. Überlegen Sie, das Design der Anwendung zu ändern.

Siehe Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error Artikel, der die Ursachen für den Fehler und mögliche Korrekturen in großen Details erklärt.

Answer 2

Sie müssen this.ref.detectChanges(); auf allen ngAfterViewChecked Typen func hinzufügen.