Angularでコンポーネントを再レンダリングする

仕事の案件でAngularを使っているのだが、コンポーネントを再レンダリングさせたいという事象に出会った。その時の備忘録。

目次

コンポーネントを再レンダリングさせたい

色々な状況が複雑に絡み合っていた。ある処理を行ったあと、初期表示に戻したいという要件があり、それじゃあということで、表示用にデータを作り直したりと色々手を尽くしたが、前述したように色々な状況が複雑に絡み合っていせいで、どうにもできなかった。

そこで、いっそコンポーネントをまるっと再レンダリングしちゃえ、ということにした。

で、それを実現するのが下記コード。

constructor(private router: Router) {}
~
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

行われていることは、1度RefreshComponentというページに飛び、Your actualComponentに戻ってくるという処理。ただユーザーはそれに気が付かない。つまりハック的な対処方法なので、使うのは自己責任で。

次に読むおすすめ記事

AngularでObjectを返すカスタムPipeを作ったがValueへのアクセス方法がわかなかったので調べてみた

Angularをバージョン指定でインストールする方法は?

Angularとセットで使うことが多いmaterial UI をインストールする

Angularでwebアプリを作成する時「コンポーネントのベストプラクティス」

Angular Material UI でカスタムカラーを設定する。

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です