web-dev-qa-db-de.com

Angular2 Router-Link funktioniert nicht

Mein Router-Link funktioniert von der Root-Komponente aus und derselbe Link funktioniert nicht, wenn ich die Links zur untergeordneten Komponente verschiebe. Der Plunkercode zeigt die Arbeitsverbindung und die Nichtarbeitsverbindung. Danke im Voraus. Der folgende Link funktioniert nicht.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

Plunker-Code mit Ausgabe

9
balaG

Sie sollten RouterModule in Ihr AppLayoutModule importieren, damit es wie folgt aussieht:

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppLayout} from './layout.component';
import {RouterModule} from '@angular/router';

@NgModule({
    imports: [ BrowserModule, RouterModule ],
    declarations: [ AppLayout ],
    exports: [ AppLayout ]
})

export class AppLayoutModule {}

Ohne sie wüsste die Komponente nicht, was die routerLink ist und kompiliert sie nicht, um href-Attribute zu korrigieren.

Plunker aktualisiert hier

21
Marcin

Wenn dies eine eigenständige Komponente war, die in ein Modul importiert wurde, können Sie das RouterModule auch einfach zu den Importen Ihres Moduls hinzufügen. Ich mag es, die Moduldeklarationen in meiner eigenen Datei zu haben, also wäre hier eine Lösung, ein App-Modul zu haben.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppLayoutModule} from '...'; <--could also be a component

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppLayoutModule,
        BrowserModule,
        RouterModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Sie müssen nur sicher sein, dass das RouterModule in das Modul importiert wird, das die routerLink-Direktive verwendet, entweder in der Moduldatei oder in der Komponentendatei.

Damit der Router-Link funktioniert, müssen Sie den Router in die Komponente importieren, in der Sie arbeiten

Beispiel

Import {Component} from '@ angular / core';
Import {Router} from '@ angular / router';

@Component ({
Selector: 'my-menu',
template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,}) 
Export class AppLayout{}

Vielen Dank!

0
Daniel Garcia