Angularに問題があります。3つのリンクがあり、そのうちの1つにクエリパラメーターがあります（リゾルバーを使用しているため）。最初と3番目のリンクをクリックすると、routerLinkActiveが設定されます。クリックすると2番目のリンクrouterLinkActiveも設定されます。しかし、コンポーネント内のクエリパラメータを変更すると、routerLinkActive設定が解除されます。
したがって、クエリパラメータを無視する必要があります。しかし、それはどのように機能しますか？誰か助けてもらえますか？
これが私の簡単なコードです：
<div class="col-12">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a
class="nav-link"
routerLink="/einstellungen/allgemein"
routerLinkActive="active">
Allgemein
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
[routerLink]="['/einstellungen/kalender']"
[queryParams]="{branch: myBranches[0].id}"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: false}">
Kalender verwalten
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
*ngIf="user.is_admin"
routerLink="/einstellungen/filialen"
routerLinkActive="active">
Filialen verwalten
</a>
</li>
</ul>
</div>
RouteLinkActiveは、正確なクエリパラメータでのみ機能します。{exact：false}をrouterLinkActiveOptionsとして渡してみてください。それがうまくいかない場合
[class.active]属性内で関数を呼び出すことができます。
<a class="nav-link" [routerLink]="['/einstellungen/kalender']" [queryParams]="{branch: myBranches[0].id}" [class.active]="isLinkActive('/my-link')">Kalender verwalten</a>
isLinkActive(url): boolean {
const queryParamsIndex = this.router.url.indexOf('?');
const baseUrl = queryParamsIndex === -1 ? this.router.url :
this.router.url.slice(0, queryParamsIndex);
return baseUrl === url;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加