web-dev-qa-db-fra.com

RouterLink ne fonctionne pas

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

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 ne réalise rien?

angularangular2-routing
86
Jeff

Le code que vous montrez ici est absolument 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 cela m'a pris du temps à 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 importations de modules, 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 afficher ce routeur, qui se trouve dans l'élément <router-outlet></router-outlet>, de sorte qu'il soit également placé dans votre balise HTML afin que le routeur sache où pour afficher ces données.

244
Sam Redway

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

<router-outlet></router-outlet>
17
zai

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

7
raj_just123

utilisez-le comme ceci pour plus d'informations lisez ceci sujet

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

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 ceci tutorial

0
Fernando Del Olmo