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路由器时，它可以很好地服务边栏。

感谢您的任何帮助。 让我知道是否可以提供更多信息

---

-UPDATE-

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

侧杆路由器

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

的AppModule

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 。 另外，将值绑定到属性[routerLink]="items.routerLink"而不是routerLink="{{items.routerLink}}"时，请使用属性绑定而不是插值。