0
votes

Mettez en surbrillance l'élément d'itinéraire actuel sans cliquer dessus

J'ai des éléments de menu sur lesquels il est possible de cliquer et qui empruntent différents itinéraires. Lorsque l'itinéraire est modifié en cliquant sur l'élément, il reste en surbrillance. Par exemple, cliquez sur Accueil, redirige vers url.com/home et le bouton Accueil reste en surbrillance. Mais si je vais directement sur url.com/home, le bouton Accueil n'est pas en surbrillance.

<li nz-menu-item routerLink="/home" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item routerLink="/about" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

Comment changer cet élément est mis en surbrillance à tout moment lorsque l'itinéraire spécifique est ouvert?

angular

0 commentaires

3 Réponses :

1
votes

C'est parce que vous n'êtes pas censé toucher l'URL vous-même. Lorsque vous procédez ainsi, vous n'envoyez pas d'événements de routage à Angular.

Essayez de naviguer deux fois vers l'URL, cela rechargera votre page: avec cela, votre application se recharge, envoyant efficacement des événements de routage.

Si vous souhaitez implémenter le comportement souhaité, vous devrez écouter les changements d'URL et recharger votre itinéraire actuel.

0 commentaires

1
votes

Puisque vous utilisez ng-zorro, vous pouvez utiliser la propriété nzSelected pour votre balise li pour déterminer si elle doit être mise en surbrillance ou non. Injectez Router dans le Router de vos composants et vérifiez si l'url actuelle correspond à l'élément de menu

HTML

constructor(private router: Router)
...

isSelected(route: string): boolean {
    return route === this.router.url;
}

<li nz-menu-item [nzSelected]="this.isSelected('/home')" routerLink="/home" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item [nzSelected]="this.isSelected('/about')" routerLink="/about" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

0 commentaires

0
votes

si vous utilisez ng-zorro-antd dans la version 10, il existe une propriété appelée [nzMatchRouter] sur nz-menu-items qui définit nzSelected selon le routerlink

https://ng.ant.design/components/menu/en#%5Bnz-menu-item%5D

Avec cela, vous n'avez besoin d'aucun texte dactylographié supplémentaire comme @kounex mentionné

<li nz-menu-item routerLink="/home" [nzMatchRouter]="true" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item routerLink="/about" [nzMatchRouter]="true" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

0 commentaires