Ссылка на маршрутизатор не работает для компонента внутри общего модуля

Я написал модуль под названием «Клиент», который имеет несколько компонентов, таких как вход в систему, главная страница и регистрация. Теперь я создал общий модуль, который также имеет 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 { }

angular routerlink angular2-routing
person Senthil Kumar    schedule 04.12.2016    source источник

Ответы (4)


arrow_upward
67
arrow_downward

Если я правильно вас понял, то ваша ошибка в том, что вы не импортируете RouterModule в свой SharedModule. Так что просто импортируйте RouterModule, чтобы получить директиву routerLink, тогда он должен работать:

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

Еще один совет: я думаю, вы не поняли паттерн с SharedModule / CoreModule. Компоненты верхнего и нижнего колонтитула являются основными компонентами вашего приложения, и вы будете использовать их только один раз в своем приложении (я верю) .. Таким образом, они принадлежат CoreModule. SharedModule предназначен для компонентов, которые используются в нескольких компонентах, например, в ссылке на социальные сети. Вы можете использовать его в разных компонентах.

Но пожалуйста, прочтите Руководство по стилю Angular для получения дополнительной информации: https://angular.io/styleguide#!#04-10

person Emre Öztürk    schedule 04.12.2016
comment
Спасибо @ oeem1011, заработало. Я буду работать над этим и заменю его на основные модули. :) - person Senthil Kumar; 04.12.2016
comment
Кстати, это директива, которую нужно было импортировать из RouterModule: github.com/angular/angular/blob/master/packages/router/src/ - person KarolDepka; 09.06.2017

arrow_upward
7
arrow_downward

У меня была такая же проблема, и, помимо импорта RouterModule, мне пришлось изменить с routerLink="path" на [routerLink]="'path'", чтобы он работал.

person s-f    schedule 26.07.2018

arrow_upward
0
arrow_downward

Импортировать импорт: [RouterModule] в общем модуле, затем использовать как это [routerLink] = 'path'

person Vibhu kumar    schedule 01.09.2020

arrow_upward
0
arrow_downward

Чтобы мой общий модуль routerLinks работал в моем, мне пришлось добавить forRoot в RouterModule и передать пустой массив маршрутов.

@NgModule({
  declarations: [...MENU_FOOTER_COMPONENTS],
  imports: [CommonModule, RouterModule.forRoot(MENU_FOOTER_ROUTES)],
  exports: [...MENU_FOOTER_COMPONENTS]
})
person Jason Spence    schedule 28.04.2021