[Angular] コンポーネントを強制的に再描画する方法

コンポーネントを任意のタイミングで再描画したい

AngularでWebアプリを開発中、コンポーネントをある特定のタイミングで再描画したいという状況があったので、その方法を調べたのでメモしておきます。

例えば非同期処理でのバインドデータ更新など、データが変わっても変更検知をしてくれない時があったりします。

ChangeDetectorRef

ChangeDetectorRef を使うことで、任意のタイミングで変更検知を発生させる事ができます。

例えば、コンポーネントの描画時に現在日時を表示するようなコンポーネントを作成してみます。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-my-sample',
  template: `
    <div>今の日時は {{getDatetime()}}</div>
    <button (click)="redraw()">再描画</button>
  `,
})
export class MySampleComponent implements OnInit {
  constructor(public changeDetectorRef: ChangeDetectorRef) { }
  ngOnInit() { }

  getDatetime() {
    return new Date().toLocaleString();
  }

  redraw() {
    // 強制的に再描画させる
    this.changeDetectorRef.detectChanges();
  }
}

このコンポーネントは、getDatetime() で返される文字列を描画します。getDatetime() では現在日時が返されることになるので、描画時の日時が表示されます。

redraw() では、detectChanges() で強制的にコンポーネントを再描画しています。再描画されると、再び getDatetime() が呼ばれ、表示される日時が更新されるのが確認できます。

次のような感じです。

以上。