Javascript 角2路由器出口子级

我是Angular 2的新手，所以一开始我可能做得不正确

我有我的主导航，它使用路由器来显示我的不同页面。在其中一个页面（称为A页面）的内部，我有一个列表，当单击某个项目时，该列表在同一页面上提供不同的侧栏。我将边栏组件设置为页面A的子路由，但是当我单击其中一个列表项时，我得到一个错误：error:error:无法匹配任何路由

这是app.component.html，这是我的导航，服务于A页

<header class="row">
  <ul class="col-md-9 col-lg-8 col-lg-offset-1 ">
    <li><a routerLink="placeHolder">Official Data</a></li>
    <li><a routerLink="blueprint-detail">AY2017-2018</a></li>
  </ul>
</header>

<router-outlet></router-outlet>

导航路由器按预期工作，但当我尝试并单击其中一个列表项时，会出现该错误。*ngFor和items.routerLink工作正常，当我将其分解为路由器页面时，它可以很好地为侧栏提供服务

谢谢你的帮助。如果我能提供更多信息，请告诉我

---

-更新-

根据反馈，我将路由器分为两个路由器。导航路由器工作正常，但是边栏路由器提供了相同的错误

侧栏路由器

const blueprintDetailRoutes: Routes = [
  {   
    path: 'blueprint-detail',
      component: BlueprintDetailComponent,
      children: [
          { path: 'executive-summary', component: ExecutiveSummaryComponent},
          { path: 'mvv', component: MvvComponent},
          { path: 'unit-goal-management', component: UnitGoalManagementComponent}
      ]
    }
];

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

导航路由器

const navigationRoutes: Routes = [
   { path: 'blueprint-detail', component: BlueprintDetailComponent},
   { path: 'placeHolder', component: PlaceHolderComponent}
];

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

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { BlueprintDetailModule } from './blueprint-detail-routing.module';
import { NavigationRoutingModule } from './app-routing.module';

import { BlueprintDetailComponent } from './blueprint-detail.component';
import { ExecutiveSummaryComponent } from './views/executive-summary.component';
import { MvvComponent } from './views/mvv.component';
import { UnitGoalManagementComponent } from './views/unit-goal-management.component';
import { PlaceHolderComponent } from './views/placeholder.component';


@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NavigationRoutingModule, // <-- Main Navigation router
    BlueprintDetailModule // <--Sidebar router
  ],
  declarations: [
    AppComponent,
    BlueprintDetailComponent,
    ExecutiveSummaryComponent,
    MvvComponent,
    UnitGoalManagementComponent,
    PlaceHolderComponent
  ],
  providers: [],
  exports: [
    RouterModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/http'导入{HttpModule}；
从'@angular/router'导入{RouterModule}；
从“./app.component”导入{AppComponent}；
从“./blueprint detail routing.module”导入{BlueprintDetailModule}；
从“./app routing.module”导入{NavigationRoutingModule}；
从“./blueprint detail.component”导入{BlueprintDetailComponent}；
从“./views/executive summary.component”导入{executivesummary component}；
从“./views/mvv.component”导入{MvvComponent}；
从“./views/unit goal management.component”导入{UnitGoalManagementComponent}；
从“./views/placeholder.component”导入{placeholder component}；
@NGD模块({
进口：[
浏览器模块，
FormsModule，
HttpModule，
NavigationRoutingModule，//我认为您的
blueprintDetailRoutes
没有引用您的根应用程序路由，因此您不应该调用
RouterModule.forRoot
而应该使用
RouterModule.forChild
作为状态：

仅在根应用程序模块AppModule中调用forRoot。正在调用
它在任何其他模块中，特别是在延迟加载的模块中，都是
与意图相反，会产生运行时错误。

此外，您应该验证是否将正确的字符串传递给
routerLink
属性，我在这里无法帮助您，因为您没有在问题中发布组件。另外，在将值绑定到属性时，请使用属性绑定而不是内插
[routerLink]=“items.routerLink”
而不是
routerLink=“{{items.routerLink}”
在这里尝试
/
谢谢你的回答。所以我应该使用一个单独的路由器模块进行导航和侧边栏？如果它们是功能模块的一部分，而不是主要的根模块，那么当然可以！好的，我现在就开始实现它。就像我说的，我是Angular的新手，所以我仍然在想办法。谢谢你太棒了！让我看看进展如何。哈米德，再次感谢你的持续帮助。我已经更新了问题以显示我的当前状态。我显然不太了解路由器。。。
const navigationRoutes: Routes = [
   { path: 'blueprint-detail', component: BlueprintDetailComponent},
   { path: 'placeHolder', component: PlaceHolderComponent}
];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { BlueprintDetailModule } from './blueprint-detail-routing.module';
import { NavigationRoutingModule } from './app-routing.module';

import { BlueprintDetailComponent } from './blueprint-detail.component';
import { ExecutiveSummaryComponent } from './views/executive-summary.component';
import { MvvComponent } from './views/mvv.component';
import { UnitGoalManagementComponent } from './views/unit-goal-management.component';
import { PlaceHolderComponent } from './views/placeholder.component';


@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NavigationRoutingModule, // <-- Main Navigation router
    BlueprintDetailModule // <--Sidebar router
  ],
  declarations: [
    AppComponent,
    BlueprintDetailComponent,
    ExecutiveSummaryComponent,
    MvvComponent,
    UnitGoalManagementComponent,
    PlaceHolderComponent
  ],
  providers: [],
  exports: [
    RouterModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }