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?
[routerLink]='[/home']
? Welche Angular2-Version und Router-Version verwenden Sie?[routerLink]="['/home']"
directives: [ROUTER_DIRECTIVES],
die Metadaten Ihrer Komponente hinzuzufügen . Ohne das wird Angular nicht wissen, wie man dasrouterLink
s analysiert .Antworten:
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:
Fügen Sie es dann zu Ihren Modulimporten hinzu, z
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.quelle
Vergessen Sie dies nicht, um dies unten in Ihre Vorlage aufzunehmen:
quelle
Versuchen Sie, die Links wie folgt zu ändern:
Fügen Sie außerdem Folgendes in die Kopfzeile von index.html ein:
<base href="https://stackoverflow.com/">
quelle
Verwenden Sie es so für mroe info lesen Sie dieses Thema
quelle
routerLink
sollte sein funktionieren ;-)"@angular/router": "~3.4.0"
. Prost!Die Links sind falsch, Sie müssen dies tun:
Sie können dieses Tutorial lesen
quelle
Ich habe Routerlink anstelle von RouterLink verwendet .
quelle
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
quelle
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:
app-routing.module.ts:
Bewegen Sie
{ path: '**', redirectTo: 'home' }
zu Ihrem AppRoutingModule:public-routing.module.ts:
app-routing.module.ts:
quelle
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 manuellBoolean(obj && obj[key])
in einen booleschen Typ konvertieren muss, um das Klicken passieren zu lassen.quelle
Nach der Arbeitsprobe habe ich eine Lösung für den Fall der reinen Komponente gefunden:
quelle
Für nicht sehr scharfe Augen wie meine hatte ich
href
stattdessenrouterLink
ein paar Suchen durchgeführt, um das herauszufinden #facepalm.quelle