web-dev-qa-db-fra.com

Angular 6 routerLinkActive ne fonctionne pas

Je crée un site en utilisant Angular 6 et je suis bloqué depuis quelques jours maintenant sur un problème. J'essaie de changer la couleur du texte (éléments de liste) sur une barre de navigation basée sur la page active. J'ai vu des exemples sur la façon de le faire en utilisant AngularJS et javascript. J'ai rencontré la documentation de la bibliothèque routerActiveLink sur https://angular.io/api/router/RouterLinkActive bibliothèque pour Angular 5+ qui semble être une solution simple, mais cela ne fonctionne pas pour moi. J'ai essayé de nombreux exemples différents que j'ai vus en ligne et aucun n'a fonctionné. Suis-je en train de manquer quelque chose? Voici quelques extraits de code:

header.component.html  
    <div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
  <li class="main-links" [routerLinkActive]="['active']">
    <a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
  </li>
  <li class="main-links">
    <a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
  </li>
</ul>

Ceci est ma déclaration pour actif dans header.component.less:

    .active {
color: #009fdb;
font-family: font-bold;

}

Lorsque j'utilise [routerLinkActive] avec les crochets, la page ne se charge pas du tout et lorsque j'utilise routerLink et routerLinkActive dans la balise a, elle ne s'enregistre pas du tout. Y a-t-il des importations qui me manquent. J'ai essayé d'importer router, routerlinkactive et routerlink depuis @ angular/core.

J'ai délibérément laissé les deux styles différents d'utiliser routerLinkActive dans l'exemple de code. Ce n'était pas comme ça quand je l'ai fait.

J'ai installé Angular 6, bootstrap 4.1.1, jquery 3 et popperjs).

Après un examen plus approfondi, j'ai découvert que routerLinkActive fonctionne correctement sur les éléments à l'intérieur du module d'application racine. J'ai créé un nouveau module pour mon en-tête et pied de page appelé UiModule et la fonctionnalité ne fonctionne pas à l'intérieur de l'en-tête. Des idées sur la façon de faire fonctionner routerLinkActive sur ce module?

htmlcssangularangular6routerlinkactive
5
R Shavers

Essayez d'importer RouterModule dans votre UiModule, il ne pourra pas utiliser celui importé dans votre fichier app.module.ts

import { RouterModule } from '@angular/router';
// some other imports here

@NgModule({
  imports: [
    RouterModule
  ],
  exports: [
    // export UI components
  ],
  declarations: [
    // declare UI components
  ]
})

Quand j'ai eu ce problème, j'ai tout importé correctement. Cela m'a pris des jours avant de comprendre que le problème venait de la façon dont j'ai structuré mon code HTML

<li class="nav-list">
  <a routerLinkActive="active" 
    [routerLinkActiveOptions]="{exact: true}"
    routerLink="/" 
    href="/">
    <i class="material-icons nav-link-icon">person</i>
    <span class="nav-link-text">Profile</span>
  </a>
</li>

Le problème était que je surveillais le .active classe pour apparaître dans l'élément li alors qu'elle figurait toujours dans l'élément anchor. Assurez-vous simplement que ce n'est pas ce qui se passe dans votre cas.

10
Frank