共有モジュール内のコンポーネントでルータのリンクが機能しない

Question

login、home、registerのようないくつかのコンポーネントを持つ "Customer"という名前のモジュールを作成しました。今私はヘッダーとフッターのような2つのコンポーネントを持っている共有モジュールを作成しました。ヘッダーとフッターは顧客モジュールのすべてのコンポーネントで共有されるため、共有モジュールに配置しました。共有モジュールは顧客モジュールにインポートされます。

ここでは、顧客モジュール内のコンポーネントを指し示すルータリンクがあります。これらのルータのリンクはhrefとして解釈されません。しかし、これらのヘッダとフッタのコンポーネントをカスタマモジュールの中に直接配置すると、それらのルータのリンクが解釈されてしまいます。

以下にコードスニペットを含めました。

共有モジュールファイル

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

カスタマー・モジュール・ファイル

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

ヘッダ成分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> 

顧客ルーティングモジュール

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

Answer 1

あなたが正しく理解していれば、間違っているのは、SharedModuleにRouterModuleをインポートしていないということです。だからディレクティブ「routerLink」を取得するRouterModuleをインポートし、それが動作するはずです：

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

別のアドバイスを：私はあなたがSharedModule/CoreModuleのパターンを理解していなかったと思います。ヘッダーとフッターのコンポーネントはアプリケーションの中核コンポーネントであり、アプリケーションでは一度だけ使用します（私も同じです）。したがって、これらはCoreModuleに属します。 SharedModuleはコンポーネント用で、ソーシャルメディアリンクなどの複数のコンポーネントで使用されます。異なるコンポーネントで使用することができます。

しかし、より詳細な情報のための角度スタイルガイドをお読みください：https://angular.io/styleguide#!#04-10