web-dev-qa-db-ja.com

共有モジュール内のコンポーネントに対してルーターリンクが機能しない

「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 { }
angularangular2-routingrouterlink
14
Senthil Kumar

私があなたを正しく理解しているなら、あなたの間違いはあなたがあなたのSharedModuleにRouterModuleをインポートしないことです。したがって、RouterModuleをインポートしてディレクティブ「routerLink」を取得するだけで機能します。

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

別のアドバイス：SharedModule/CoreModuleのパターンを理解していないと思います。ヘッダーとフッターのコンポーネントはアプリケーションのコアコンポーネントであり、アプリケーションで1回だけ使用します（i belive）。したがって、これらはCoreModuleに属しています。 SharedModuleは、ソーシャルメディアリンクなどの複数のコンポーネントで使用されるコンポーネント用です。さまざまなコンポーネントで使用できます。

ただし、詳細についてはAngularスタイルガイドをご覧ください： https://angular.io/styleguide#!#04-1

49
Emre Öztürk

同じ問題があり、RouterModuleインポートの他に、機能させるためにrouterLink="path"から[routerLink]="'path'"に変更する必要がありました。

1
s-f