각도 4 - 지연로드 - 모듈 라우팅이 잘 작동하지 않습니다.

Question

내 문제는 자식 라우터가 작동하지 않는다는 것입니다. 앱 모듈은 DashboardModule을로드합니다 (헤더도 함께 표시됩니다). 문제는 여기에서 시작됩니다. 헤더의 라우터 링크가 다른 구성 요소를로드하지 않습니다. 내가 원하는 것은 무엇입니까? 라우터 링크는 라우터 콘센트 사이에 "하위"구성 요소를 표시합니다. 도움 주셔서 감사합니다.

앱 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

같은과 두 개의 구성 요소를로드하려고 라우트 ... 사실 라우팅 구성의 마지막 요소이기 때문에 헤더 구성 요소 만 얻으면됩니다.

두 compotant를 표시하고 그것을 '경로'로 라우팅하는 englobing 구성 요소를 만들어야합니다.

대시 보드 rooting.module : 당신이 당신의 childroute의 따라이 템플릿의 다른 componant을 표시하려면

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> 

, <router-outlet></router-outlet>에 의해 <your-dashboard-css-balise></your-dashboard-css-balise>를 교체하고 그들을 구성 dashboard-rooting.module 님의 childroute 메타 데이터입니다.

나는 희망이있어, 좋은 하루 되길 바랍니다.