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

问题描述

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

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.

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

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.

共享模块文件

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

推荐答案

如果我正确理解您的意思，那么您的错误是，您没有将RouterModule导入到SharedModule中.因此，只需导入RouterModule即可获得指令"routerLink"，然后它应该可以工作:

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 ]
})

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

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.

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

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

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