在组件内部打开模态弹出窗口时，表达式已更改错误 [英] Expression has changed error on Opening a Modal Popup inside a component

问题描述

我有一个父组件，我正在使用@ViewChild()将一些HTML内容传递给子公共组件.

I have a parent component and i am passing some HTML from it to a child common component using @ViewChild().

Child组件加载弹出窗口时.控制台抛出以下错误.

When Child component loads up a popup. Console throws below error.

"ExpressionChangedAfterItHaHasBeenCheckedError:检查表达式后已更改.上一个值:"ngIf:未定义".当前值:"ngIf:这是描述".该视图似乎是在其父级及其视图之后创建的孩子们已经被检查过脏了.是否在变更检测挂钩中创建了它?"

我正在使用来自'@ ng-bootstrap/ng-bootstrap'的{NgbModal};

这是代码.

更新- 该父组件在另一个父html文件中称为app-parent-component.

Update - This parent component is called as app-parent-component in another parent html file.

父组件

@ViewChild('templateToLoad') templateToLoad;


constructor(private modalService: NgbModal, private ChangeDetector: ChangeDetectorRef) {
}

ngOnInit() {
    this.openPopup();
}

ngAfterViewInit() {
    this.ChangeDetector.detectChanges();
}

private openPopup() {
    const modalPrompt = this.modalService.open(CommonChildModalComponent, {windowClass: 'modal-prompt fade-in-down'});
    modalPrompt.componentInstance.title = 'Title';
    modalPrompt.componentInstance.contentTemplate = this.templateToLoad;
    modalPrompt.componentInstance.originContext = this;
    modalPrompt.componentInstance.description = 'ABC';

父HTML

<ng-template #templateToLoad>
  <div class="someClass">This data will be shown on Popup without any error.
  </div>
</ng-template>

CommonChildPopup组件

@Input() title?: string;
@Input() description?: string;
@Input() originContext: any;
@Input() contentTemplate?: any;

constructor(public activeModal: NgbActiveModal) {
}

ngOnInit() {
    console.log('I am here in CommonModalComponent ngOnInit');
}

CommonChildPopup HTML

CommonChildPopup HTML

<div class="modal-header">
  <h4 class="modal-title">{{title}}</h4>
</div>

<div class="modal-body pb-3" [class.dimmer]="simulateLoading">
  <p *ngIf="description">{{description}}</p>
  <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>

上述控制台错误是针对此行ngIf ="description"的.如果我删除此行，下一行将出现相同的错误.请帮忙.

The above console error is for this line ngIf="description". If i remove this line, same error will come for next line. Please help.

推荐答案

您正在尝试在生命周期挂钩中更新属性值，然后再在父组件中检查它们.

You're trying to update the property values in a lifecycle hook after they have been previously checked in the parent component.

推荐的解决方案是在按钮单击/另一个用户触发的事件上打开模式，或者，如果您需要在视图初始化后将其打开，则可以使用setTimeout()来跳过滴答声

The recommended solution is to open the modal on a button click / another user triggered event, or if you need to open it after the view is initialized you can use the setTimeout() that will skip a tick

ngAfterViewInit() { setTimeout(() => this.openPopup()); }

ngAfterViewInit() { setTimeout(() => this.openPopup()); }

工作中的监听器: https://plnkr.co/edit/FVV7QVp620lIGJwEhN6V?p =预览

关于此错误的非常详尽的解释: https://blog.angularindepth.com/everything-you-ne-ed-to-know-about-the-expressionchangedafterasbeencheckederror-error-e3fd9ce7dbb4

A very nice and detailed explanation about this error : https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

这篇关于在组件内部打开模态弹出窗口时，表达式已更改错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！