Angular routerLink ne navigue pas vers le composant correspondant

Question

Mon routage dans les applications angular2 fonctionne bien. Mais je vais faire des routeLink basés sur ce :

Voici mon itinéraire :

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

Et voici les liens que j'ai créés :

<ul class="nav navbar-nav item">
  <li>
    <a routerLink='/home' routerLinkActive="active">Home</a>
  </li>
  <li>
    <a routerLink='/about' routerLinkActive="active">About this</a>
  </li>
</ul>

Je m'attends à ce que, lorsque je clique dessus, il navigue vers le composant correspondant, mais ils ne font rien ?

Answer 1

Le code que vous montrez ici est tout à fait correct.

Je pense que votre problème est que vous n'importez pas RouterModule (où RouterLink est déclaré) dans le module qui utilise ce modèle.

J'ai eu un problème similaire et il m'a fallu du temps pour le résoudre car cette étape n'est pas mentionnée dans la documentation.

Allez donc dans le module qui déclare le composant avec ce modèle et ajoutez :

import { RouterModule } from '@angular/router';

puis l'ajouter à vos importations de modules, par exemple.

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

En plus de disposer des déclarations d'importation correctes, vous aurez également besoin d'un endroit pour afficher ce routerLink, qui se trouve dans le fichier <router-outlet></router-outlet> Il doit donc être placé quelque part dans votre code HTML pour que le routeur sache où afficher ces données.

Answer 2

N'oubliez pas de l'ajouter ci-dessous dans votre modèle :

<router-outlet></router-outlet>

Answer 3

Essayez de changer les liens comme ci-dessous :

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Ajoutez également ce qui suit dans l'en-tête de index.html :

<base href="http://stackoverflow.com/">

Answer 4

Utilisez-le comme ça pour plus d'informations lisez ceci sujet

<a [routerLink]="['/about']">About this</a>

Answer 5

Les liens sont faux, tu dois faire ça :

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

Vous pouvez lire ceci tutoriel