ExpressionChangedAfterItHasBeenCheckedErrorの対処法

Angular 4+で「ExpressionChangedAfterItHasBeenCheckedError」が発生することがあります。

友人に頼まれたコード書いててこれでました。これテストに出ません。ユニットテストと思った人は顔洗ってきましょう。

子コンポーネントに値を渡した後に親コンポーネントの値が変わってたときに出てくるエラーみたいです。

親に向かって何だその値変更は、違うだろハゲ。ってことですね。

無理やり治す方法としては

  constructor(
    private codeService: CodeService,
    private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.codeService.getHTMLCode()
      .subscribe((code: string) => {
        this.code = code;
        this.cdr.detectChanges();
      });
  }

要は、this.cdr.detectChanges();すれば強制的に変更が検出されてエラーは出なくなると。

でも色々とクソ設計ってことを自分で認めたことになるっぽいので設計やり直せハゲってことみたいです。

qiita.com