路由器链接不能用于共享模块内的组件
问题描述:
我写了一个名为“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 { }
答
如果我正确理解你,那么你的错误是,你不要在你的SharedModule中导入RouterModule。所以刚才导入的RouterModule得到指令“routerLink”,那么它应该工作:
@NgModule({
imports: [RouterModule ],
declarations: [ HeaderComponent, FooterComponent ],
exports: [ HeaderComponent, FooterComponent ]
})
另请教:我想你不明白与SharedModule/CoreModule格局。你的页眉和页脚组件是你的应用程序的核心组件,你只会在你的应用程序中使用它们(我相信)。所以它们属于CoreModule。 SharedModule适用于在多个组件中使用的组件,例如社交媒体链接。你可以在不同的组件中使用它。
但请阅读角风格指南进一步信息:https://angular.io/styleguide#!#04-10
谢谢@ oeem1011,它的工作。我会继续努力并将其改为核心模块。 :) –
顺便说一下,这是指令,需要从RouterModule导入:https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts – KarolDepka