RouterLink funktioniert nicht

Mein Routing in den angle2-Apps funktioniert gut. Aber ich werde einigen Routelink machen , basierend auf diese :

Hier ist mein Routing:

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

Und hier sind die Links, die ich gemacht habe:

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

Ich erwarte, dass, wenn ich darauf klicke, es zu der respektierten Komponente navigiert, aber sie nichts ausführen?

Der Code, den Sie dort anzeigen, ist absolut korrekt.

Ich vermute, dass Ihr Problem darin besteht, dass Sie RouterModule (wo RouterLink deklariert ist) nicht in das Modul importieren, das diese Vorlage verwendet.

Ich hatte ein ähnliches Problem und es dauerte einige Zeit, bis ich es gelöst hatte, da dieser Schritt in der Dokumentation nicht erwähnt wird.

Gehen Sie also zu dem Modul, das die Komponente mit dieser Vorlage deklariert, und fügen Sie hinzu:

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

Fügen Sie es dann zu Ihren Modulimporten hinzu, z

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

Neben den richtigen Importanweisungen muss auch ein Platz für diesen RouterLink angezeigt werden, der sich im <router-outlet></router-outlet>Element befindet, sodass er auch irgendwo in Ihrem HTML-Markup platziert werden muss, damit der Router weiß, wo diese Daten angezeigt werden sollen.

Vergessen Sie dies nicht, um dies unten in Ihre Vorlage aufzunehmen:

<router-outlet></router-outlet>

Versuchen Sie, die Links wie folgt zu ändern:

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

Fügen Sie außerdem Folgendes in die Kopfzeile von index.html ein:

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

Verwenden Sie es so für mroe info lesen Sie dieses Thema

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

Die Links sind falsch, Sie müssen dies tun:

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

Sie können dieses Tutorial lesen

Ich habe Routerlink anstelle von RouterLink verwendet .

Ich bin mir bewusst, dass diese Frage mittlerweile ziemlich alt ist, und Sie haben sie höchstwahrscheinlich inzwischen behoben, aber ich möchte hier als Referenz für jeden posten, der diesen Beitrag bei der Fehlerbehebung findet, dass so etwas gewonnen hat Funktioniert nicht, wenn sich Ihre Anchor-Tags in der Index.html befinden. Es muss sich in einer der Komponenten befinden

Für alle, die diesen Fehler nach dem Aufteilen von Modulen haben und Ihre Routen überprüfen, ist mir Folgendes passiert:

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

Bewegen Sie { path: '**', redirectTo: 'home' }zu Ihrem 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 { }

Es gibt auch einen anderen Fall, der zu dieser Situation passt. Wenn Sie in Ihrem Interceptor einen nicht-booleschen Wert zurückgegeben haben, ist das Endergebnis so.

Zum Beispiel hatte ich versucht, obj && obj[key]Sachen zurückzugeben. Nachdem ich eine Weile debuggt habe, wird mir klar, dass ich dies manuell Boolean(obj && obj[key])in einen booleschen Typ konvertieren muss, um das Klicken passieren zu lassen.

Nach der Arbeitsprobe habe ich eine Lösung für den Fall der reinen Komponente gefunden:

1. Deklarieren Sie die Komponente auf App-Ebene
2. Initialisieren Sie nicht in der Komponente

Für nicht sehr scharfe Augen wie meine hatte ich hrefstattdessen routerLinkein paar Suchen durchgeführt, um das herauszufinden #facepalm.