RouterLink ne fonctionne pas
mon routage dans les applications angular2 fonctionne bien. Mais je vais faire quelques routeLink basé 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 fait:
<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, quand je clique sur eux, il navigue vers le composant respecté, mais ils n'accomplissent rien?
5 réponses
le code que vous montrez est absolument correct.
je soupçonne que votre problème est que vous n'importez pas RouterModule (qui est 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 un certain temps pour le résoudre car cette étape n'est pas mentionnée dans la documentation.
alors allez au 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 d'avoir les bons rapports d'importation, vous aurez aussi besoin d'un endroit pour que le routerLink soit affiché, qui est dans l'élément <router-outlet></router-outlet> , de sorte que cela doit aussi être placé quelque part dans votre marqueur HTML pour que le routeur sache où afficher ces données.
n'oubliez pas d'ajouter ceci ci-dessous dans votre modèle:
<router-outlet></router-outlet>
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>
ajouter aussi ce qui suit dans l'en-tête de index.html:
<base href="/">
les liens sont erronés, vous devez faire ceci:
<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 ce tutoriel