問題タブ [routerlinkactive]

他のページに移動してもサイドバーのオプションを強調表示したい【routerlinkactive状態】にしたいです。だから私はホームコンポーネントに表示されるサイドメニューコンポーネントを持っています

sidemenu コンポーネント html ファイル

ホーム コンポーネント html ファイル

ルートファイル

デフォルトでは、最初のコンポーネントにいるときに Sidemenu-item-1 が強調表示されますが、最初のコンポーネントを置き換えて 2 番目のコンポーネントに移動しても、routerlink のアクティブな状態を同じにしたいと考えています。何か案は？

routerLinkActiveを使用してリンクがアクティブなときに、css のスタイルを設定し、クラスを追加したいと考えています。ブートストラップで試してみましたが、動作しますが、フロントエンド開発者からカスタム CSS を取得すると、ルート URL がrouteLinkと一致していても、アクティブであることを示すクラスが追加されません。

私は少しイライラしていて、何が悪いのかわかりません。ルートがアクティブな場合、アンカーにクラスmenu-activeが追加されると思います。

ここに私のコードがあります:

sidebar.component.html

この質問から参照された、以下のコードのようにテストしました。routerlink がアクティブであるため、 iが表示されることを期待していますが、 http://localhost:4200/dashboardにいる場合でもアクティブではありません。

誰かが私のフラストレーションを解消してくれることを願っています。ありがとうございました。

アップデート：

要素を検査しても、クラスは追加されません。そのスクリーンショットは次のとおりです。

ログイン ページでのログインに成功すると、ルートが「インバウンド」ビューに変わります。このビューには、ナビゲーション バーに「インバウンド」と「アウトバウンド」の 2 つのタブがあります。ルーターの状態を反映するために、「受信」navtab が既に選択されていることを望みます。ただし、このデモを実装した後も、デフォルトではまだ選択されていません

html:

成分：

ルート:

[routerLinkActive] を使用したサイド メニューがあり、クリックするとアクティブなタブを取得できます。ただし、デフォルトのタブをアクティブにロードできません

これは私のhtmlファイルです：

これは、ページが読み込まれたときに得られるものです

2 番目の画像のように、2 番目のオプションをデフォルトで有効にしたいのですが、これを実現する方法について何かアイデアはありますか?