RouterLink non funziona

Il mio percorso nelle app angular2 funziona bene. Ma ho intenzione di creare un routeLink basato su questo :

Ecco il mio percorso:

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

Ed ecco i link che ho creato:

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

Mi aspetto che, quando clicco su di essi, navighi al componente rispettato, ma non eseguono nulla?

Il codice che stai mostrando è assolutamente corretto.

Sospetto che il tuo problema sia che non stai importando RouterModule (che è dove viene dichiarato RouterLink) nel modulo che utilizza questo modello.

Ho avuto un problema simile e mi ci è voluto del tempo per risolverlo poiché questo passaggio non è menzionato nella documentazione.

Quindi vai al modulo che dichiara il componente con questo modello e aggiungi:

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

quindi aggiungilo ai tuoi moduli importa ad es

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

Oltre ad avere le istruzioni di importazione corrette, avrai anche bisogno di un posto per mostrare quel routerLink, che si trova <router-outlet></router-outlet>nell'elemento, in modo che anche questo debba essere posizionato da qualche parte nel tuo markup HTML in modo che il router sappia dove visualizzare quei dati.

non dimenticarlo per aggiungerlo di seguito nel tuo modello:

<router-outlet></router-outlet>

Prova a cambiare i link come di seguito:

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

Inoltre, aggiungi quanto segue nell'intestazione di index.html:

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

usalo in questo modo per maggiori informazioni leggi questo argomento

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

Sono consapevole che questa domanda è abbastanza vecchia ormai, e molto probabilmente l'hai già risolta, ma mi piacerebbe postare qui come riferimento per chiunque trovi questo post durante la risoluzione di questo problema è che questo genere di cose ha vinto non funziona se i tuoi tag Anchor sono in Index.html. Deve essere in uno dei componenti

I collegamenti sono sbagliati, devi fare questo:

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

Puoi leggere questo tutorial

Stavo usando routerlink invece di routerLink .

Per chiunque abbia questo errore dopo aver diviso i moduli, controlla i tuoi percorsi, mi è successo quanto segue:

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

Passa { path: '**', redirectTo: 'home' }al tuo AppRoutingModule:

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

C'è anche un altro caso che si adatta a questa situazione. Se nel tuo intercettore, hai fatto in modo che restituisse un valore non booleano, il risultato finale è così.

Ad esempio, avevo provato a restituire obj && obj[key]qualcosa. Dopo aver eseguito il debug per un po ', mi rendo conto che devo convertirlo manualmente in tipo booleano Boolean(obj && obj[key])per far passare il clic.

Seguendo il campione di lavoro , ho trovato la soluzione per il caso del componente puro:

1. Dichiara componente a livello di app
2. Non inizializzare nel componente

Per gli occhi non molto acuti come i miei, hrefinvece routerLink, ho fatto qualche ricerca per capirlo #facepalm.