Angular - 模态 NgBootstrap ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Angular - Modal NgBootstrap ExpressionChangedAfterItHasBeenCheckedErrorAngular - 模态 NgBootstrap ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2021-01-02 00:51:51
【问题描述】：

我使用了 ng-bootstrap 的模态，当数据从第一个组件发送到 ngOnChanges 中的 sencons 组件时，我尝试打开模态，但出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改检查后。以前的值：“类名：未定义”。当前的值：'className：模态背景淡化显示'。好像景色在其父级和子级都脏之后创建检查。它是在变更检测钩子中创建的吗？

第一个组件：

 public openPopup(event): void {
        if (event) {
            this.agreement = event;
        }
 }

 <ef-cp1(openPopup)="openPopup($event)"></ef-cp1>
 <ef-cp2 [agreement]="agreement"></ef-cp2>

第二个组件（ef-cp2）：

  @Input()
  public agreement: any;

  ngOnChanges(changes: SimpleChanges) {
    if (changes["agreement"] && changes["agreement"].currentValue) {
      const modal: NgbModalRef = this.initPopUp();
      modal.componentInstance.agreement = changes["agreement"].currentValue;
    }
  }

 private initPopUp(): NgbModalRef {
    return this.modalService.open(NewComponent,
      {
        size: 'lg',
        windowClass: 'modal-adaptive',
        ariaLabelledBy: 'modal-basic-title',
        keyboard: false,
        backdrop: 'static',
        centered: true
      });
  }

【问题讨论】：

标签： angular typescript

【解决方案1】：

ngOnChanges 在 ngOnInit 之前运行，因此您可能需要考虑一下您在此处所做的事情 - 以您有限的信息很难确定

也许在 ngOnChanges 中设置一个变量

agreementChanged = true

然后在 ngAfterContentInit 中做

if (agreementChanged) 
{
 this.initPopUp();
 agreementChanged = false
}

【讨论】：