路由器鏈接不能用於共享模塊內的組件

Question

我寫了一個名爲「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。所以剛纔導入的RouterModule得到指令「routerLink」，那麼它應該工作：

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

另請教：我想你不明白與SharedModule/CoreModule格局。你的頁眉和頁腳組件是你的應用程序的核心組件，你只會在你的應用程序中使用它們（我相信）。所以它們屬於CoreModule。 SharedModule適用於在多個組件中使用的組件，例如社交媒體鏈接。你可以在不同的組件中使用它。

但請閱讀角風格指南進一步信息：https://angular.io/styleguide#!#04-10