RouterLink ne fonctionne pas


117

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?


Pouvez-vous essayer [routerLink]='[/home']? Quelle version Angular2 et quelle version de routeur utilisez-vous?
Günter Zöchbauer

ça ne marche pas. êtes-vous sûr de l'endroit de vos questions ?? Je pense que j'utilise la dernière version d'angular2, mais je ne sais pas comment le vérifier. Je l'ai généré avec ng new . et il devrait être mis à jour
Jeff

2
Désolé, devrait être[routerLink]="['/home']"
Günter Zöchbauer

2
Vous avez peut-être oublié d'ajouter directives: [ROUTER_DIRECTIVES],aux métadonnées de votre composant. Sans cela, Angular ne saura pas analyser le routerLinks.
Mark Rajcok

Réponses:


321

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.


1
Je le pensais et oui - vous avez tout à fait raison dans mon cas aussi!
Dhananjay

1
L'ajout du module Router à mes importations a fait l'affaire, merci!
ENDEESA

1
Travaille pour moi. Merci beaucoup!
TheBosti

20

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

<router-outlet></router-outlet>

9

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/">


5

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

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

7
Selon votre lien, il routerLinkdevrait fonctionner ;-)
Günter Zöchbauer

Cela fonctionne pour "@angular/router": "~3.4.0". À votre santé!
mikeym

2
Oui, la notation entre crochets fonctionne (et est une syntaxe valide avec un objectif spécifique), mais ce n'est pas une solution à cette question.
isherwood

2

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


1

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


1
La notation entre parenthèses sert un objectif différent et ne résout pas ce problème.
isherwood

c'était ça! <a [routerLink </font>="['/home' </font>" routerLinkActive="active"> Accueil </a> Je suivais le tutoriel qui m'avait fait mettre le routerLinkActive dans la balise <li>. quand je l'ai placé dans la balise <a ça marche maintenant! Merci beaucoup!!!! C'est excellent!
Rich P

BTW, j'ai déjà toutes les autres balises / éléments suggérés en place. Maintenant, cette fonctionnalité fonctionne (en quelque sorte). Je dois suivre le reste du tutoriel car je remarque que lorsque je sélectionne d'autres lignes, même si la valeur de la ligne sélectionnée est passée (je la vois dans l'url), seule la première ligne est rendue. Mais ce sera un autre sujet. Merci encore pour cette aide précieuse.
Rich P

Je ne sais pas pourquoi, mais quand j'ai mis Bracket, cela a fonctionné pour moi, et je n'ai pas importé RouterModule dans mon module d'application ..
Cegone

1

J'utilisais routerlink au lieu de routerLink .


J'ai fait cette erreur et cela l'a corrigé! Je n'ai aucune idée de la raison pour laquelle vous avez été défavorisé (peut-être parce que cela aurait pu être un commentaire à la place ou parce qu'il ne répond pas directement à cette question spécifique?). Ce serait bien si les gens qui votent contre cela pouvaient expliquer pourquoi.
JoniVR le

1

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 { }

1

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.



1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.