AngularでRoutingしてもServiceが再作成されるときの原因

背景

AngularでServiceを作成して下記の一文を入れておくとクラスがシングルストン構成となるはずです。

@Injectable({
  providedIn: 'root'
})

シングルストン構成とは、アプリケーション上単一のインスタンスしか持たいない構成で、通常のクラスは複数の実態を持つが、シングルストンなクラスはどこからアクセスしても単一な実態へアクセスすることになります。
詳しくは下記。
https://ja.wikipedia.org/wiki/Singleton_パターン

これで構成しておけば、「アプリケーション上単一」なのでコンストラクタは1回しか実行されないはずなのですが…
しかし、Routingにして、ページを移動するとページを移動するたびにコンストラクタが実行され、処理が重くなってしまう現象がありました。

結論

AngularのRoutingの使い方が間違えていました。
aタグの呼び出し方です。hrefではなくrouterLinkを使う必要がありました。
これで、複数回初期化のロジックが呼ばれなくて済みます。
単純なミスでしたが、結構悩んだので、ここに記しておきます。

間違え

<div class="list-group">
  <a href="dashboard" class="list-group-item list-group-item-action active" aria-current="true">dashboard</a>
  <a href="menue" class="list-group-item list-group-item-action">menue</a>
  <a href="table" class="list-group-item list-group-item-action">table</a>
  <a href="history" class="list-group-item list-group-item-action">history</a>
  <a href="setting" class="list-group-item list-group-item-action">setting</a>
</div>

正解

<div class="list-group">
    <a  routerLinkActive="active" routerLink="/dashboard" class="list-group-item list-group-item-action active" aria-current="true">dashboard</a>
    <a  routerLinkActive="active" routerLink="/menue" class="list-group-item list-group-item-action">menue</a>
    <a  routerLinkActive="active" routerLink="/table" class="list-group-item list-group-item-action">table</a>
    <a  routerLinkActive="active" routerLink="/history" class="list-group-item list-group-item-action">history</a>
    <a  routerLinkActive="active" routerLink="/setting" class="list-group-item list-group-item-action">setting</a>
  </div>