22

我编写了一个名为“客户”的模块，它有几个组件，如登录、主页和注册。现在我创建了一个共享模块，它也有 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 { }
4

4 回答 4

70

如果我理解正确，那么您的错误是，您没有在 SharedModule 中导入 RouterModule。所以只需导入 RouterModule 以获取指令“routerLink”，然后它应该可以工作：

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

另一个建议：我认为您不了解 SharedModule / CoreModule 的模式。您的页眉和页脚组件是应用程序的核心组件，您只会在应用程序中使用它们一次（我相信）。所以它们属于 CoreModule。SharedModule 用于组件，用于多个组件，例如社交媒体链接。您可以在不同的组件中使用它。

但请阅读 Angular 样式指南以获取更多信息： https ://angular.io/styleguide#!#04-10

于 2016-12-04T12:12:56.497 回答
9

我遇到了同样的问题，除了RouterModule导入之外，我必须从 to 更改routerLink="path"为[routerLink]="'path'"使其正常工作。

于 2018-07-26T12:35:49.193 回答
0

导入导入：共享模块中的 [RouterModule] 然后像这样使用 [routerLink]="'path'"

于 2020-09-01T10:57:19.460 回答
0

为了让我的共享模块 routerLinks 在我的工作中工作，我必须将“forRoot”添加到 RouterModule 并传入一个空的路由数组。

@NgModule({
  declarations: [...MENU_FOOTER_COMPONENTS],
  imports: [CommonModule, RouterModule.forRoot(MENU_FOOTER_ROUTES)],
  exports: [...MENU_FOOTER_COMPONENTS]
})
于 2021-04-28T18:13:44.567 回答