Angular 2 路由器插座儿童

Question

我是 Angular 2 的新手，所以我可能一开始就做错了。

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

这是 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>

这里是页面A.html

<ul>
    <li *ngFor="let items of outcomeMenu" id="a"><a routerLink="{{items.routerLink}}" routerLinkActive="active"> {{items.title}} <span>
          <svg height="15" width="20">
            <circle cx="9" cy="7" r="6" fill="#7ED321" />
          </svg>
          {{items.status}}</span></a>
    </li>
</ul>

<router-outlet></router-outlet>

最后，这是我的路由模块。像ExecutiveSummaryComponent这样的组件就是我说的侧边栏。

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

@NgModule({
  imports: [
    RouterModule.forRoot(
      blueprintDetailRoutes,
      { enableTracing: true }
    )
  ],
  exports: [
    RouterModule
  ]
})

导航路由器按预期工作，但是当我尝试单击列表项之一时，我收到了该错误。 *ngFor 和 items.routerLink 工作正常，当我将其分解为页面 A 路由器时，它可以很好地服务于侧边栏。

感谢您的帮助。如果我可以提供更多信息，请告诉我

---

-更新-

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

侧边栏路由器

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 { }

Answer 1

我认为您的 blueprintDetailRoutes 没有引用您的根应用程序路由，因此您不应该调用 RouterModule.forRoot 而应该使用 RouterModule.forChild 作为 Angular 文档状态：

仅在根应用程序模块 AppModule 中调用 forRoot。打电话 它在任何其他模块中，特别是在延迟加载模块中，是 违背本意并且会产生运行时错误。

此外，您应该验证您是否将正确的字符串传递给 routerLink 属性，因为您没有在问题中发布您的组件，所以我无法在此处提供帮助。另外，将值绑定到属性时，请使用属性绑定而不是插值 [routerLink]="items.routerLink" 而不是 routerLink="{{items.routerLink}}"。