Angular 2 模式弹出错误 "Expression has changed after it was checked"

Question

Youtube video demonstrating the problem

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

1. 如果我点击按钮而不是按键盘上的回车键

2. 即使我按下 enter，来自 app.componen.ts 的表单似乎也没有任何问题。它似乎只是子组件 (accouunt.component.ts)。

3. 如果我点击 account.component 的输入，输入一些东西，点击按钮，没有显示错误，删除输入，按 enter，现在与之前相比没有显示错误

我查看了 SO 和谷歌，似乎人们遇到了同样的问题并通过调用更改检测来解决它。但是，我已经尝试过将它放在诸如模态显示之后的位置，但它没有用。另外，如果这样可以解决问题，那么它也无法解释为什么 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>

应用程序组件.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>

账户.组件.ts

导出类 AccountComponent 实现 OnInit {

  private changePasswordForm: FormGroup;

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

  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
            })
    }
}

消息对话框.component.html

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

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

消息对话框.component.ts

export class MessageDialogComponent implements OnInit {

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

  constructor(
    public activeModal: NgbActiveModal,
  ) { }

  ngOnInit() {
  }

}

Answer 1

您的错误似乎是在执行以下代码后发生的:

ngAfterViewInit() {
    if (!this._elRef.nativeElement.contains(document.activeElement)) {
      this._renderer.invokeElementMethod(this._elRef.nativeElement, 'focus', []);
    }
}

https://github.com/ng-bootstrap/ng-bootstrap/blob/1.0.0-alpha.20/src/modal/modal-window.ts#L65

在 input 上触发 blur 事件，将您的控件标记为 touched。

它不适用于 AccountComponent，因为 AccountComponent 中的检测更改发生在 ngbModalContainer 之前，而 FormGroup 在 app.component.html 获取正确的值。

可能的解决方案:

1) 在打开模式之前将您的控件标记为已触摸

account.component.ts

onUpdatePassword() {
  Object.keys(this.changePasswordForm.controls).forEach(key => {
     this.changePasswordForm.controls[key].markAsTouched();
  });

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

2) 更改订单标签

app.component.html

<template ngbModalContainer></template>
<router-outlet> </router-outlet>