yuu-yuikenのブックマーク - はてなブックマーク

[Angular] ブラウザを閉じる・リロードのタイミングで処理を実行する @HostListener
Angularアプリを終了するときに処理を実行したい AngularにはngOnDestroyというライフサイクルメソッドがありますが、これはブラウザのタブがリロードされたり、ブラウザを閉じたりURLが新しいページに変更されたりするときには、このフックは実行されません。 Angularアプリ全体が破壊されたとき、何らかの処理を挟みたい時はどうすればよいでしょうか? 💡 結論、@HostListenerとWindow: beforeunloadまたはunloadを使う。 @HostListenerデコレータとはディレクティブに対してイベントハンドラーを紐づけることができます。ディレクティブ以外にも、windowイベント(unloadなど)のイベントにも紐づけることができます。任意のイベントハンドラの前にHostListenerデコレータを付けます。
yuu-yuiken 2022/12/14
Angular
リンク
[Angular][RxJS][NgRx] 複数のObservableをSubscribeする
通常subscribe()は一つのObservableを処理します。下記のようにNgRx/SelectorでObservableを複数取得して、一度のSubscribeで処理するには、zip()を使います。 zipは複数のObservableを組み合わせて一つのObservableとして返すOperatorです。 💡 注意 : zipはRxJS8で非推奨となりました。代わりにzipWithを使ってください。 const isAuth$ = this.store.select(getIsAuth); const isAuthAdmin$ = this.store.select(getIsAuthAdmin); zip(isAuth$, isAuthAdmin$).subscribe(([isAuth, isAuthAdmin]) => { if (isAuth) { 処理 } else
yuu-yuiken 2022/12/08
Angular
リンク
[Angular][ライブラリ] VirtualScrollingでパフォーマンス改善
VirtualScrollingとは VirtualScrollingとはAngular Material CDKの一つで、表示されている部分のみDOMを生成するもので、パフォーマンス向上に貢献します。通常、何千件とあるアイテムをfor文などで繰り返しレンダリングすると、見える範囲以外のすべてのDOMを一気に生成するためレスポンスが悪くなります。そこで、このVirtualScrollingを使うことでレンダリングパフォーマンスを向上させることができます。導入方法とポイント Angular CDKをインストールしてあれば、そのままimportすることで使えます。 ScrollingModuleのインポート app.module.ts import { ScrollingModule } from '@angular/cdk/scrolling'; @NgModule({ declara
yuu-yuiken 2022/11/10
Angular
リンク
[Angular][状態管理]NgRxの基本
はじめに NgRxを用いて状態管理を行うことになったので、学習ということでまとめてみました。 NgRxは、Reduxなど他の状態管理ライブラリに対して情報が少ないうえに、RxJSやFlux(アーキテクチャ設計思想)などの前提知識も多いので学習コストは高いと思います。私も全体のうちほんの一部しか理解できていませんが、公式ドキュメントや参考にさせて頂いた情報を元に、自分が理解できるように書き出しました。この記事で紹介するのは下記の通りです。 @ngrx/store Action Store Reducer Selector @ngrx/Effect なお、@ngrx/Entityは割愛します。 NgRxとは Angular用の状態管理ライブラリです。 NgRx Docs Reduxというライブラリに影響を受けて作成されたAngular専用の公式ライブラリです。 NgRxを利用するとRedu
yuu-yuiken 2022/09/08
Angular
リンク
1