web-dev-qa-db-fra.com

La liaison du routeur ne fonctionne pas pour un composant à l'intérieur d'un module partagé

J'ai écrit un module nommé "Client" qui comprend plusieurs composants comme la connexion, l'accueil et l'inscription. Maintenant, j'ai créé un module partagé qui comprend également 2 composants tels que l'en-tête et le pied de page. Étant donné que l'en-tête et le pied de page vont être partagés par tous les composants du module client, je les ai placés dans le module partagé. Le module partagé est importé dans le module client.

Il y a maintenant un lien de routeur qui pointe vers le composant à l'intérieur du module client. Ces liens de routeur ne sont pas interprétés comme href. Mais si je place ces composants d'en-tête et de pied de page directement à l'intérieur du module client, ces liens de routeur sont interprétés.

J'ai inclus les extraits de code ci-dessous.

Fichier de module partagé

import { NgModule } from '@angular/core';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  imports: [ ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

export class SharedModule { }

Fichier de module client

import { NgModule } from '@angular/core';

import { SharedModule } from './shared/shared.module';
import { CustomerRoutingModule } from './customer-routing.module';

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import { CustomerRegisterComponent } from './register/register.component';

@NgModule({
  imports: [ SharedModule, CustomerRoutingModule ],
  declarations: [ CustomerComponent, CustomerHomeComponent, CustomerLoginComponent, CustomerRegisterComponent ]
})

export class CustomerModule { }

Composant d'en-tête html

<div class="header-wrapper">
    <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand header-logo" routerLink="./">Your space your time</a>
            <ul class="nav navbar-nav header-menu float-lg-right">
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" href="#">About</a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" href="#">Services</a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" routerLink="./signin" routerLinkActive="active">Login <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" routerLink="./signup" routerLinkActive="active">Register</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Module de routage client

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import { CustomerRegisterComponent } from './register/register.component';

const customerRoutes: Routes = [
  { path: '', redirectTo: 'customer', pathMatch: 'full' },
  { path: 'customer', component: CustomerComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: CustomerHomeComponent },
      { path: 'signin', component: CustomerLoginComponent },
      { path: 'signup', component: CustomerRegisterComponent }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(customerRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class CustomerRoutingModule { }
angularangular2-routingrouterlink
14
Senthil Kumar

Si je vous comprends bien, votre erreur est que vous n'importez pas le RouterModule dans votre SharedModule. Il suffit donc d'importer le RouterModule pour obtenir la directive "routerLink", alors cela devrait fonctionner:

@NgModule({
  imports: [RouterModule ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

Un autre conseil: je pense que vous n'avez pas compris le modèle avec SharedModule/CoreModule. Vos composants d'en-tête et de pied de page sont des composants essentiels de votre application et vous ne les utiliserez qu'une seule fois dans votre application (je crois). Ils appartiennent donc au CoreModule. Le SharedModule est pour les composants, qui est utilisé dans plusieurs composants, par exemple un lien de médias sociaux. Vous pouvez l'utiliser dans différents composants.

Mais veuillez lire le Angular Style Guide pour plus d'informations: https://angular.io/styleguide#!#04-1

49
Emre Öztürk

J'ai eu le même problème et en plus de l'importation de RouterModule, j'ai dû changer de routerLink="path" à [routerLink]="'path'" pour le faire fonctionner.

1
s-f