RouterLink ne fonctionne pas

Mon routage dans les applications angular2 fonctionne bien. Mais je vais créer un itinéraireLink basé sur ceci :

Voici mon routage:

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

Et voici les liens que j'ai faits:

<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 accède au composant respecté, mais ils n'effectuent rien?

Le code que vous montrez est tout à fait correct.

Je soupçonne 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 un certain 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 ajoutez-le à vos modules importations par exemple

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

En plus d'avoir les instructions d'importation correctes, vous aurez également besoin d'un emplacement pour que ce routerLink soit affiché, qui se trouve dans l' <router-outlet></router-outlet>élément, de sorte qu'il doit également être placé quelque part dans votre balisage HTML afin que le routeur sache où afficher ces données.

n'oubliez pas ceci pour ajouter ceci ci-dessous dans votre modèle:

<router-outlet></router-outlet>

Essayez de modifier 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="https://stackoverflow.com/">

utilisez-le comme ceci pour les informations mroe lire cette rubrique

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

Je sais que cette question est assez ancienne maintenant, et que vous l'avez probablement résolue maintenant, mais j'aimerais publier ici comme référence pour toute personne qui trouve ce message lors du dépannage de ce problème, c'est que ce genre de chose a gagné ne fonctionne pas si vos balises Anchor sont dans Index.html. Il doit être dans l'un des composants

Les liens sont faux, 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

J'utilisais routerlink au lieu de routerLink .

Pour toute personne ayant cette erreur après avoir fractionné les modules, vérifiez vos itinéraires, ce qui m'est arrivé:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Déplacer { path: '**', redirectTo: 'home' }à votre AppRoutingModule:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Il existe également un autre cas qui convient à cette situation. Si dans votre intercepteur, vous lui avez fait renvoyer une valeur non booléenne, le résultat final est comme ça.

Par exemple, j'avais essayé de retourner des obj && obj[key]choses. Après avoir débogué pendant un certain temps, je me rends compte que je dois le convertir en type booléen manuellement, comme Boolean(obj && obj[key])pour laisser passer le clic.

Suite à l' exemple de travail , j'ai trouvé une solution pour le cas du composant pur:

1. Déclarer le composant au niveau de l'application
2. Ne pas lancer dans le composant

Pour des yeux pas très vifs comme les miens, j'ai eu à la hrefplace de routerLink, m'a pris quelques recherches pour comprendre cela #facepalm.