Angularにて現在アクティブなページのリンクボタンのみの色を変化させるためには
「routerLinkActiveOptions」の設定をしなければいけません。
設定しないと、「/」や「help」ごとにアクティブ判別出来ず、「/」にアクセスした場合は他ページへ遷移してもずっとアクティブカラーになってしまいます。
設定の際にエラーでハマって解決した事例をまとめました。
まず下記のようにコーディングをしました。（ヘルプ画面のナビボタンを設置しているヘルプコンポーネントHTML）
▼エラー時のコード
トップ画面へ
ヘルプ画面へ
そしたらヘルプコンポーネントの内容が表示されません。。
コンソールを確認したら
「ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Missing expected } at the end of the expression [{exact: true] in ng:///HelpModule/HelpComponent.html@1:80 ("e}">トップ画面へ」
と表示されています。
「routerLinkActiveOptions」のソースを貼り付ける際、
「}」がついていない箇所があり該当コンポーネントHTMLが表示されませんでした。
下記は「}」を貼り付けた正常なコードです。
▼正常なコード
トップ画面へ
ヘルプ画面へ
エラーが出現したら必ずコンソールエラーを確認することを習慣にしないといけませんね！