角4 - 遅延ロード - モジュールルーティングもうまくいきません

Question

私の問題は、子ルータが動作しないことです。 appモジュールはDashboardModuleを読み込みます（ヘッダーも表示されます）。問題はここから始まります。ヘッダー内のルーターリンクは、他のコンポーネントをロードしたくありません。 私は何をしたいですか？ ルータのリンクには、ルータのコンセントの間に「サブ」コンポーネントが表示されます。 ありがとうございます。

APP-routing.module.ts

import { NgModule } from '@angular/core'; 
    import { Routes, RouterModule, ExtraOptions } from '@angular/router'; 
    import { LoginComponent } from './pages/login/login.component'; 
    import { ModuleWithProviders } from '@angular/core'; 

    export const routes: Routes = [ 
     { 
      path: '', 
      pathMatch: 'full', 
      component: LoginComponent 
     }, 
     { 
      path: 'login', 
      component: LoginComponent 
     }, 
     { 
      path: 'dashboard', 
      pathMatch: 'full', 
      loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' 
      //canLoad: [AuthGuard] 
     }, 
    ]; 

    const config: ExtraOptions = { 
     useHash: true, 
    }; 

    export const AppRoutingModule: ModuleWithProviders =RouterModule.forRoot(routes); 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppRoutingModule }  from './app-routing.module'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './pages/login/login.component'; 
import { RouterModule } from '@angular/router'; 
import { ModuleWithProviders } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 

import { CommonModule } from "@angular/common"; 

const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true }); 

@NgModule({ 
    imports:  [ BrowserModule, 
        FormsModule, 
        AppRoutingModule, 
        CommonModule, 

        FormsModule, 
        HttpModule ], 

    declarations: [ AppComponent, 
        LoginComponent ], 
    providers: [ 

    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts

<router-outlet> </router-outlet> 

dashboard.module.ts

import { NgModule } from '@angular/core'; 
import { HeaderComponent } from "./header/header.component"; 
import { DashboardComponent } from './dashboard.component'; 
import { DashboardRoutingModule } from './dashboard-routing.module'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 
import { HttpModule } from '@angular/http'; 
import { CommonModule } from '@angular/common'; 
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component'; 
import { ContentComponent } from "./content/content.component"; 

@NgModule({ 
    imports: [ 
    DashboardRoutingModule, 
    FormsModule, 
    HttpModule, 
    CommonModule 
    ], 
    declarations: [ 
    DashboardComponent, 
    HeaderComponent, 
    AlldocumentsComponent, 
    ContentComponent 

    ], 
    bootstrap: [ DashboardComponent] 
}) 
export class DashboardModule { 
} 

ダッシュボードrouting.module.ts

import { RouterModule, Routes } from '@angular/router'; 
import { NgModule } from '@angular/core'; 
import { ModuleWithProviders } from '@angular/core'; 
import { DashboardComponent } from './dashboard.component'; 
import { HeaderComponent } from './header/header.component'; 
import { ContentComponent } from './content/content.component'; 
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: DashboardComponent, 
    pathMatch: 'full', 
    }, 
{ 
     path: '', 
     component:HeaderComponent, 
     children: [ 

     ] 
    }, 

]; 


export const DashboardRoutingModule: ModuleWithProviders = RouterModule.forChild(routes) 

dashboard.component.html

<router-outlet> </router-outlet> 

header.component.html

<li routerLinkActive="active"><a [routerLink]="['alldocuments']">MINDEN DOKUMENTUM</a></li> 

Answer 1

あなたが同じ2つのコンポーネントをロードしてみてくださいroute ...実際には、ヘッダーコンポーネントのみを取得した場合は、ルーティング設定の最後のコンポーネントであるためです。

あなたは、2つのコンポジットを表示し、それを ''パスにルーティングするエンブロブコンポーネントを作成する必要があります。

ダッシュボード-rooting.module：

const routes: Routes = [ 
    { 
    path: '', 
    component: FullComponent, 
    pathMatch: 'full', 
    }, 
]; 

FullComponent.html

<your-header-css-balise></your-header-css-balise> 
<your-dashboard-css-balise></your-dashboard-css-balise> 

あなたは、あなたのchildrouteの応じて、このテンプレートの他のcomponantを表示<router-outlet></router-outlet>によって<your-dashboard-css-balise></your-dashboard-css-balise>を交換し、それらを設定する場合あなたのdashboard-rooting.moduleの子ルートメタデータ

私は晴れていて、いい日がありますように。