2

InputrouterLinkActive を使用して、アクティブなクラスを特定の URL に追加しています。しかし、単語のチャンクを検出した場合、特定のリンクが常にアクティブであることを望みます。説明しましょう: 定義したルートが/rent/page/:idで、テンプレートに入れる場合は、次のようにします。

 <a [routerLinkActive]="['active']" [routerLink]="['/rent/page/1']" title="">rent</a>

アドレス バーの URL が定義されたルートと一致する場合に機能し、activeクラスを追加します。レンタル リンクを含むメイン ナビゲーションがアクティブになります。

しかし、ルーティングにこの定義/rent/:property/:name/:idがあり、URL をタップすると、メイン ナビゲーションにアクティブなリンクが追加されません。

次の解決策を見つけました。

   // ...
   this._router.events.subscribe(
        (urlObj) => {
            if(urlObj.url.match(/^(\/rent).*$/)) {
                this.active["rent"] = true;
            }
        }
    )
    // ...

rent現在の URLに一致するたびに、プロパティrentをオブジェクトに設定activeし、レント ナビゲーションにアクティブに追加します。前述のテンプレートを次のように変更します。

<a [class.active]="active['rent']" [routerLink]="['/rent/page/1']" title="">rent</a>

それは機能しますが、これが良い習慣であるかどうかはわかりません。

私の質問は次のとおりです。ユーザーがページを変更しても、特定のリンクをアクティブに保ちたい場合はどうすればよいですか? routerLinkActiveを使用してこれを行う別の方法はあり[routerLinkActive]ますか?

4

1 に答える 1