Angular 5路由子路由

我对Angular很新，我需要有关路由的帮助 . 我有这个设置 .

app.component.html

<router-outlet name="nav"></router-outlet>
<router-outlet name="left-sidebar"></router-outlet>
<ui-workspace [push-workspace]="pushWorkspace$ | async">
    <router-outlet name=content></router-outlet>
</ui-workspace>
<router-outlet></router-outlet>

app.module.ts

import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { HomeRoutingModule } from './home-routing.module';
import { EffectsModule } from '@ngrx/effects';
import { effects } from './store';
import { CommonModule } from '@angular/common';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    EffectsModule.forFeature(effects),
    P365ControlsModule.forChild(),
    HomeRoutingModule
  ]
})
export class HomeModule {
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoadingComponent } from './components/loading/loading.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';

const routes: Routes = [
  {
    path: 'loading',
    component: LoadingComponent
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent
  },
  {
    path: '',
    redirectTo: '/welcome', pathMatch: 'full'
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

e-forms-list.component.html

<p>
  e-forms-list works!
</p>
<ui-button [routerLink]="['add','education']">Klikni za add e prijave...</ui-button>
<router-outlet></router-outlet>

e-forms.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { EFormsRoutingModule } from './e-forms-routing.module';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  imports: [
    CommonModule,
    EFormsRoutingModule,
    P365ControlsModule.forChild()
  ],
  declarations: [EFormsListComponent, EFormsEducationEditComponent]
})
export class EFormsModule { }

e-forms-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, AuthzGuard } from '../services/guards';
import { ApplicationRole } from '../models';
import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { NavComponent } from '../components/nav/nav.component';
import { LeftSidebarComponent } from '../components/left-sidebar/left-sidebar.component';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';

const routes: Routes = [
  {
    path: 'eForms',
    //canActivate: [AuthGuard, AuthzGuard],
    data: {
      roles: [ApplicationRole.EducationAdmin, ApplicationRole.Learner]
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: EFormsListComponent,
        outlet: 'content',
        children: [
          {
            path: 'add/education',
            component: EFormsEducationEditComponent
          }
        ]
      },
      {
        path: '',
        component: NavComponent,
        outlet: 'nav'
      },
      {
        path: '',
        component: LeftSidebarComponent,
        outlet: 'left-sidebar'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EFormsRoutingModule { }

e-forms-education-edit.component.html

<p>
  e-forms-education-edit works!
</p>

我想要得到的是：url：http://localhost:4200/eForms - >渲染eForms路由和用路径''定义的第一个子节点 . 这没问题 . http://prntscr.com/it7gth

url：http://localhost:4200/eForms/add/education - >渲染eForms路由，然后渲染第一个子节点，然后渲染它's first chiled defined with path ' add / education' . 但是当我尝试这个时，我找不到组件 . http://prntscr.com/it7i3o

有人可以解释我做错了什么 . 目前我没有使用延迟加载模块或类似的东西，但我计划将来这样做 .