Angular 2模态弹出错误“表达式在检查后发生了变化”

Github repository for the demo app

我有一个非常简单的应用程序,包含应用程序组件,子组件(帐户),处理消息对话框组件的警报服务(弹出模式).

出于演示目的,我有两个相同的形式,一个在app.component.ts内,一个在account.component.ts内.每个人都有一个按钮,可以调用警报服务来显示消息对话框模式.

问题是,当我单击子组件的表单的输入字段(account.component.ts)和“按键盘上的输入”时,我收到此错误

EXCEPTION: Error in ./AccountComponent class AccountComponent – inline template:2:2 caused by: Expression has changed after it was checked. Previous value: ‘true’. Current value: ‘false’.
Note that this error dose not occur at any other situation mentioned below

>如果我单击按钮而不是按键盘上的Enter键
>即使按Enter键,app.componen.ts中的表单似乎也没有任何问题.它似乎只是子组件(accouunt.component.ts).
>如果我单击account.component的输入,输入内容,单击按钮,不显示错误,删除输入,按回车,现在没有显示错误比较之前

我调查了SO和google,似乎人们遇到了同样的问题并通过调用change detect来解决它.但是,我已经尝试过并把它放在诸如模态显示之后的地方并且它不起作用.此外,如果这将解决它,那么它不解释为什么app.component.ts中的表单不会导致我这个错误.

下面是一些代码片段,完整的演示项目可以在上面的github链接中找到.这个问题困扰了我好几天.非常感谢您的帮助.

app.component.html

<label>This form is from app.component.html</label>
<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
    <input placeholder="Old Password" formControlName="oldPassword">
    <button class="btn btn-success">Update Password</button>
</form>

<br><br><br><br>

<label>This form is from account.component.html</label>
<router-outlet> </router-outlet>

<template ngbModalContainer></template>

app.component.ts

export class AppComponent implements OnInit {

    private changePasswordForm: FormGroup;

    constructor(
      private formBuilder: FormBuilder,private alertService: AlertService,) { }

    ngOnInit() {
      this.changePasswordForm = this.formBuilder.group({
        oldPassword: [''],})
    }

    onUpdatePassword() {
      this.alertService.alertPopup('test2','asfafa')
    }
}

account.component.html

<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
  <input placeholder="Old Password" formControlName="oldPassword">
  <button class="btn btn-success">Update Password</button>
</form>

account.component.ts

导出类AccountComponent实现OnInit {

private changePasswordForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,) { }

  ngOnInit() {
    this.changePasswordForm = this.formBuilder.group({
      oldPassword: [''],})
  }

  onUpdatePassword() {
    this.alertService.alertPopup('test2','asfafa')
  }
}

alert.service.ts

@Injectable()
export class AlertService {
    private subject = new Subject<any>();
    private keepAfterNavigationChange = false;

    constructor(
        private router: Router,private modalService: NgbModal,) { }


    alertPopup(title: string,content: string) {
        // open modal to check if worked over night
        const modalRef = this.modalService.open(MessageDialogComponent);

        modalRef.componentInstance.titleText = title
        modalRef.componentInstance.bodyText = content

        modalRef.result
            .then(response => {
            })
            .catch(() => {
                return
            })
    }
}

消息dialog.component.html

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

<div class="modal-body">
  <p>{{bodyText}}</p>
</div>

消息dialog.component.ts

export class MessageDialogComponent implements OnInit {

  @Input() titleText: string;
  @Input() bodyText: string;

  constructor(
    public activeModal: NgbActiveModal,) { }

  ngOnInit() {
  }

}