在Angular中,当父组件和子组件之间进行数据传递时,子组件会在父组件执行完变更检测后再进行自身的变更检测。这意味着,当父组件在子组件的变更检测周期内修改了子组件绑定的属性,就会在控制台上触发ExpressionChangedAfterItHasBeenCheckedError错误。
在Angular 8到11之间的变化中,有一些更改可能会引起该错误。可能是由于变更检测策略的更改导致的,也可能是由于组件声明周期钩子的更改导致的。
解决方法是在组件的ngAfterViewInit生命周期钩子内使用setTimeout包装代码。这样做可以确保代码的执行时机在子组件和父组件的变更检测周期之外。
在子组件中,可以使用@Output()将数据传递给父组件。
子组件示例代码:
@Component({
selector: 'app-child',
template:
})
export class ChildComponent {
@Output() messageSent = new EventEmitter
onSend() { this.messageSent.emit("Hi from child component!"); }
ngAfterViewInit() { setTimeout(() => { // Do something here }); } }
父组件示例代码:
@Component({
selector: 'app-parent',
template: {{message}}
})
export class ParentComponent {
message: string;
onMessageSent(message: string) { this.message = message; }
ngAfterViewInit() { setTimeout(() => { // Do something here }); } }