問題タブ [routerlinkactive]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
4630 参照

angular - Angular routerLinkActive が期待どおりに機能しない

私はかなり単純なプロジェクトに取り組んでいますが、この問題には困惑しています!

routerLinkActive がアクティブにならないという 1 つの小さな問題を除いて、ルーティングをセットアップし、正常に動作しています。

まだ質問に画像を埋め込むことはできません。リンクをクリックして、得られた結果を確認してください。

ルーティング結果

http://localhost:4200/1に移動すると、「1」メニュー項目がナビゲーション バーでアクティブとして正しく表示されます。その後、子ルートhttp://localhost:4200/1/top100に移動すると、「1」メニューは引き続きアクティブに設定されたままになります。これはまさに私がそれを機能させたい方法です。

ただし、非常によく似た設定で、「4」メニュー項目をhttp://localhost:4200/2/Aに移動します。これにより、上部のナビゲーション バーの「4」がアクティブであり、「Test A」ボタンがアクティブであることが正しく表示されます。しかし、http://localhost:4200/2/Bに移動すると、「Test B」ボタンはアクティブとして正しく表示されますが、メイン ナビゲーション バーは「4」のアクティブ フラグを失いました。

以下にコード スニペットを添付します。

ナビゲーション バー

ボタングループ

ルート

2 つの例の違いがわかりません。私が求めているものを達成するための洞察や実用的なデモを誰かが持っていれば、素晴らしいことです。

ありがとうデビッド