web-dev-qa-db-fra.com

Le lien du routeur Angular2 ne fonctionne pas

Mon lien de routeur fonctionne à partir du composant racine et le même lien ne fonctionne pas si je déplace les liens vers le composant enfant. Le code du plongeur indique le lien de travail et le lien de non-fonctionnement. Merci d'avance. Le ci-dessous est les liens qui ne fonctionnent pas.

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

Code Plunker avec problème

angularangular2-routingangular2-template
9
balaG

Vous devez importer RouterModule dans votre AppLayoutModule pour qu'il se présente comme suit:

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

Sans ce composant, il ne savait pas ce que était la variable routerLink et ne le compilait pas pour corriger les attributs href.

Plunker mis à jour ici

21
Marcin

S'il s'agissait d'un composant autonome importé dans un module, vous pouvez également simplement ajouter le module Routeur aux importations de votre module. Pour ma part, j'aime bien avoir les déclarations de module dans mon propre fichier, alors une solution ici serait d'avoir app-module.

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

La seule chose dont vous devez être sûr est que le RouterModule est importé dans le module qui utilise la directive routerLink, dans le fichier de module ou le fichier de composant.

0
Jan Morten Sørensen

Pour que le lien de connexion fonctionne, vous devez importer le routeur dans le composant sur lequel vous travaillez.

Exemple

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

Je vous remercie!

0
Daniel Garcia