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中调用。调用它在任何其他模块中，特别是在延迟加载的模块中，是与意图相反，会产生运行时错误。

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

Angular 2 Router Outlet Children

1 个答案: