路由器链接不能用于共享模块内的组件

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