关于 rxjs：父子之间的通信问题 – Angular 6


Problems in communication between parent and child - Angular 6

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

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

这是我的代码：

父组件html

1
2
!
</app-error>

父组件ts(节)

1
2
3
4
5
6
export class InputComponent implements OnInit {
    hasErrors = false;
    ...
    setHasErrors(hasErrors) {
        this.hasErrors = hasErrors;
    }

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

编辑

一位朋友帮我提供了另一个解决方案，只需在声明中使用 true 使发射器异步：

子组件 ts

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
    }
}
相关讨论

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

嗯，有时确实如此。您遇到了 angular 引发的最讨厌的行为之一。

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

采取以下引发错误的方法：

1
2
3
4
5
6
7
8
9
10
<form [name]="formName"
      [formGroup]="formGroup">
 
    <input formControlName="name"
           required
           placeholder="Please enter you name">
 
</form>

  Name is required.

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

一种解决方法是通过在其周围添加另一个 将错误 div 置于与输入相同的级别(如上所述)。

并非所有英雄都穿着斗篷，有些人会在 Github 上发表评论

相关讨论

像这样修改父组件：

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

1
2
3
4
5
6
7
constructor(private cd: ChangeDetectorRef) {  }


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

相关讨论