ログイン、ホーム、登録などのコンポーネントがいくつかある「顧客」というモジュールを作成しました。次に、ヘッダーとフッターなどの 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 { }
ベストアンサー1
私が正しく理解しているなら、あなたの間違いは、SharedModule に RouterModule をインポートしていないことです。したがって、RouterModule をインポートしてディレクティブ "routerLink" を取得すれば、動作するはずです。
@NgModule({
imports: [RouterModule ],
declarations: [ HeaderComponent, FooterComponent ],
exports: [ HeaderComponent, FooterComponent ]
})
もう 1 つのアドバイス: SharedModule / CoreModule のパターンを理解していないと思います。ヘッダー コンポーネントとフッター コンポーネントはアプリケーションのコア コンポーネントであり、アプリケーションで 1 回しか使用しません (そう信じています)。したがって、これらは CoreModule に属します。SharedModule は、ソーシャル メディア リンクなど、複数のコンポーネントで使用されるコンポーネント用です。さまざまなコンポーネントで使用する場合があります。
詳細については、Angular スタイル ガイドをお読みください。https://angular.io/styleguide#!#04-10