RouterLink funktioniert nicht

116

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?

Jeff
quelle
Kannst du es bitte versuchen [routerLink]='[/home']? Welche Angular2-Version und Router-Version verwenden Sie?
Günter Zöchbauer
es funktioniert nicht Bist du sicher mit dem Ort deiner Fragen? Ich glaube, ich benutze die letzte Version von angle2, aber ich weiß nicht, wie ich das überprüfen soll. Ich habe es mit ng new generiert . und es sollte aktualisiert werden
Jeff
2
Sorry, sollte sein[routerLink]="['/home']"
Günter Zöchbauer
2
Möglicherweise haben Sie vergessen, directives: [ROUTER_DIRECTIVES],die Metadaten Ihrer Komponente hinzuzufügen . Ohne das wird Angular nicht wissen, wie man das routerLinks analysiert .
Mark Rajcok
Mögliches Duplikat der Angular2 Router-Verbindung funktioniert nicht
Isherwood

Antworten:

318

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.

Sam Redway
quelle
Ich dachte schon und ja - auch in meinem Fall hast du absolut Recht!
Dhananjay
Das Hinzufügen des Router-Moduls zu meinen Importen hat den Trick gemacht, danke!
ENDEESA
Funktioniert bei mir. Vielen Dank!
TheBosti
20

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

<router-outlet></router-outlet>
zai
quelle
9

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

raj_just123
quelle
5

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

<a [routerLink]="['/about']">About this</a>
rashfmnb
quelle
7
Laut deinem Link routerLinksollte sein funktionieren ;-)
Günter Zöchbauer
Das funktioniert für "@angular/router": "~3.4.0". Prost!
Mikeym
2
Ja, die Klammernotation funktioniert (und ist eine gültige Syntax mit einem bestimmten Zweck), aber es ist keine Lösung für diese Frage.
Isherwood
1

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

Fernando Del Olmo
quelle
Die Klammernotation dient einem anderen Zweck und löst dieses Problem nicht.
Isherwood
das war's! <a [routerLink‹="['/home' weiblicher" routerLinkActive="active"> Startseite </a> Ich folgte dem Tutorial, in dem ich routerLinkActive in das <li> li-Tag eingefügt habe. Wenn ich es in das <a-Tag eingefügt habe, funktioniert es jetzt! Danke vielmals!!!! das ist ausgezeichnet!
Rich P
Übrigens habe ich bereits alle anderen Tags / vorgeschlagenen Elemente vorhanden. Jetzt funktioniert diese Funktion (irgendwie). Ich muss dem Rest des Tutorials folgen, da ich bemerke, dass beim Auswählen anderer Zeilen, obwohl der Wert für die ausgewählte Zeile übergeben wird (ich sehe ihn in der URL), nur die erste Zeile gerendert wird. Aber das wird ein anderes Thema sein. Nochmals vielen Dank für diese großartige Hilfe.
Rich P
Ich weiß nicht warum, aber als ich Bracket platzierte, funktionierte es für mich und ich importierte RouterModule nicht in mein App-Modul.
Cegone
1

Ich habe Routerlink anstelle von RouterLink verwendet .

Schein
quelle
Ich habe diesen Fehler gemacht und das hat ihn behoben! Ich habe auch keine Ahnung, warum Sie abgelehnt wurden (vielleicht, weil dies stattdessen ein Kommentar gewesen sein könnte oder weil es diese spezielle Frage nicht direkt beantwortet?). Wäre schön, wenn Leute, die es ablehnen, einen Grund dafür liefern könnten.
JoniVR
1

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

Zufälliger Typ
quelle
1

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 { }
Emerica
quelle
1

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.

Jiahua Zhang
quelle
0

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

Aragorn
quelle