先日の ng-japan OnAir を視聴していて知ったこと。サービスに ngOnDestroy が書けるとのこと。知らなかった…！

この記事のコードの前提条件

サービス

ngOnDestroy を書くだけ。

コンポーネントメタデータの providers でサービスを指定する。このようにするとエレメントインジェクターでサービスのインスタンスが生成され、コンポーネントとサービスのライフタイムが一致する。

コンポーネント破棄のタイミングでサービス内の ngOnDestroy が呼ばれる。

コンポーネントメタデータの providers でサービスを指定しない。このようにするとルートインジェクターでサービスのインスタンスが生成され、コンポーネントよりサービスほうが長く生存する。（モジュールインジェクターを使っても同じ）

コンポーネント破棄のタイミングでサービス内の ngOnDestroy は呼ばれない。

ルーティングを宣言して、ページ移動によりコンポーネントが生成・破棄されるようにした。
サービスの ngOnDestroy が呼ばれたかコンソール出力で判定する。

home → foo → home とリンクを辿る。 FooComponent（エレメントでサービス注入）が破棄されるタイミングでサービスの ngOnDestroy が呼ばれる。

home → bar → home とリンクを辿る。BarComponent（ルートでサービス注入）が破棄されるタイミングでサービスはまだ生存しているため ngOnDestroy は呼ばれない。

検証したコードは以下のURLで公開。
https://codesandbox.io/s/happy-heisenberg-n6018

サービス内で Observable を購読したり、setInterval で定期処理を実行しているようなケースで役立つ。

コンポーネントの ngOnDestroy で呼び出していた終了処理がサービスの「自分自身が破棄されたタイミング」という関心事になり、終了処理の呼び忘れなどが防げる。利用者であるコンポーネントはインジェクターを変えることで終了処理のタイミングを指示できるようになる。