Angular 2在扩展类中使用属​​性，因为ngIf不起作用

Question

我为模态创建了一个角度2分量，这个组件扩展了一个基本模态类，它包含一个布尔属性，指示模态是否被打开。然后我需要在模板中的* ngIf中使用此属性来显示/隐藏模态。

问题是当我调用open方法时出现以下错误：

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

我的模态组件：

@Component({
  selector: 'cmg-modal-create',
  template: require('./modal.create.html')
})
export class ModalCreateComponent extends Modal {
  constructor() {
    super();
  }
}

我的组件模板：

<div class='modal-overlay' *ngIf='isModalOpen'></div>
<section id='modal-create' class='modal' *ngIf='isModalOpen'>
  // modal body
</section>

模态类：

export class Modal {
  protected isModalOpen: boolean = false;

  protected open(): void {
    this.isModalOpen = true;
  }

  protected close(): void {
    this.isModalOpen = false;
  }
}

最后在顶级组件中我调用模态打开方法

顶级组件：

@Component({
  directives: [ ModalCreateComponent ],
  selector: 'cmg-project-card',
  template: require('./project-card.html')
})
export class ProjectCardComponent {
  @ViewChild('createModal') createModal: any;

  private openModal(): void {
    this.createModal.open();
  }
}

顶级组件模板：

<cmg-modal-create #createModal></cmg-modal-create>

Answer 1

此错误消息表示，假设您没有遇到角度本身的错误，那些被称为的内容只是为了检索数据以呈现给视图正在改变该值。要正确修复它，你需要找到它是什么并改变它以消除它的副作用。

Answer 2

导入以下内容：

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

然后将ChangeDetectorRef添加到构造函数中，并在更改布尔值时使用detectChanges()方法，如下所示：

this.changeDetectionRef.detectChanges();