路由器链接不适用于共享模块内的组件 [英] Router link not working for a component inside a shared module

问题描述

我编写了一个名为客户"的模块，它有几个组件，如登录、主页和注册.现在我创建了一个共享模块，它也有 2 个组件，例如页眉和页脚.由于页眉和页脚将由客户模块中的所有组件共享，因此我将它们放置在共享模块中.共享模块导入到客户模块中.

现在有一个路由器链接指向客户模块内的组件.那些路由器链接没有被解释为 href.但是如果我将这些页眉和页脚组件直接放在客户模块中，那么这些路由器链接就会被解释.

我已经包含了下面的代码片段.

共享模块文件

import { NgModule } from '@angular/core';import { HeaderComponent } from './header/header.component';从'./footer/footer.component'导入{FooterComponent}；@NgModule({进口: [ ],声明: [ HeaderComponent, FooterComponent ],出口:[ HeaderComponent, FooterComponent ]})导出类 SharedModule { }

客户模块文件

import { NgModule } from '@angular/core';从 './shared/shared.module' 导入 { SharedModule };import { CustomerRoutingModule } from './customer-routing.module';从 './customer.component' 导入 { CustomerComponent };从 './home/home.component' 导入 { CustomerHomeComponent };从 './login/login.component' 导入 { CustomerLoginComponent };import { CustomerRegisterComponent } from './register/register.component';@NgModule({进口:[ SharedModule, CustomerRoutingModule ],声明:[ CustomerComponent, CustomerHomeComponent, CustomerLoginComponent, CustomerRegisterComponent ]})导出类 CustomerModule { }

标题组件 html

<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="切换导航"></button><div class="collapse navbar-toggleable-md" id="navbarResponsive"><a class="navbar-brand header-logo" routerLink="./">你的空间你的时间</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="#">关于</a><li class="nav-item header-menu-item"><a class="nav-link header-menu-link" href="#">服务</a><li class="nav-item header-menu-item"><a class="nav-link header-menu-link" routerLink="./signin" routerLinkActive="active">登录<span class="sr-only">(current)</span></a><li class="nav-item header-menu-item"><a class="nav-link header-menu-link" routerLink="./signup" routerLinkActive="active">注册</a>
</nav>

客户路由模块

import { NgModule } from '@angular/core';从@angular/router"导入 { RouterModule, Routes };从 './customer.component' 导入 { CustomerComponent };从 './home/home.component' 导入 { CustomerHomeComponent };从 './login/login.component' 导入 { CustomerLoginComponent };import { CustomerRegisterComponent } from './register/register.component';const customerRoutes: 路由 = [{ path: '', redirectTo: 'customer', pathMatch: 'full' },{ 路径:'客户'，组件:CustomerComponent，孩子们: [{ path: '', redirectTo: 'home', pathMatch: 'full' },{ path: 'home', 组件: CustomerHomeComponent },{ path: 'signin', 组件: CustomerLoginComponent },{ 路径:'注册'，组件:CustomerRegisterComponent }]}];@NgModule({进口:[RouterModule.forChild(customerRoutes)],出口:[路由器模块]})导出类 CustomerRoutingModule { }

解决方案

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

@NgModule({进口:[路由器模块]，声明: [ HeaderComponent, FooterComponent ],出口:[ HeaderComponent, FooterComponent ]})

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

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

I have written a module named "Customer" which has several components like login, home and register. Now I have created a shared module which is also having 2 components such as header and footer. Since header and footer are going to be shared by all the components in the customer module I have placed them in the shared module. The shared module is imported to the customer module.

Now there is a router link which points to the component inside customer module. Those router link are not getting interpreted as href. But if I place those header and footer component directly inside the customer module then those router links are getting interpreted.

I have included the code snippets below.

Shared Module file

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

Customer module file

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

Header component 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>

Customer routing module

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

解决方案

If i understand you correctly, then your mistake is, that you don't import the RouterModule in your SharedModule. So just import the the RouterModule to get the directive "routerLink", then it should work:

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

Another advice: I think you didn't understand the pattern with SharedModule / CoreModule. Your header and footer components are core components of your application and you will use them only once in your application (i belive).. So they belong into the CoreModule. The SharedModule is for components, which is used in multiple components, for example a social-media Link. You might use it in different components.

But Please read the Angular Style Guide for further informations: https://angular.io/styleguide#!#04-10

这篇关于路由器链接不适用于共享模块内的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！