Question

我在子路由模块中定义了以下路由

const routes: Routes = [
  {
    path: ''  ,
    component: DashboardComponent
  },
  {
    path: 'application',
    component: ApplicationComponent,
    children: [
      {
        path: '',
        component: ApplicationStep1Component,
        outlet: "appSteps"
      },
      {
        path: 'step1',
        component: ApplicationStep1Component,
        outlet: "appSteps"
      },
      {
        path: 'step2',
        component: ApplicationStep2Component,
        outlet: "appSteps"
      }
    ]
  }
];

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

父级路线的样子

const  routes = [
     {
       path: 'applications',
       loadChildren: './applications/applications.module#ApplicationsModule'
     }
  ];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  declarations: []
})

在我的仪表板组件中，我有一个导航栏，我想链接到嵌套router-outlet内的一个组件，因此，当出现以下情况时，“ {Step 1””和“ Step”将显示在router-outlet内点击链接。

  <div class="row">
    <div class="col text-center">
      <a class="btn btn-primary" [routerLink]="['step1']">Step 1</a>
    </div>
    <div class="col text-center">
      <a class="btn btn-primary" [routerLink]="['step2']">Step 1</a>
    </div>
  </div> <!-- end .row -->

  <router-outlet name="appSteps"></router-outlet>

激活applications/application路由后，可以正确显示Step1组件，但是如果尝试使用导航栏，则会在控制台中告诉我Error: Cannot match any routes. URL Segment: 'applications/application/step1'，但出现错误。

我尝试了step1路径的变体，但仍然遇到相同的错误。

我确定我想做的事情是可能的，但是我显然不是在寻找正确的术语……这样做的正确方法是什么？

Answer 1

您应遵循此语法用于激活辅助路由器出口

<div class="row">
    <div class="col text-center">
      <a class="btn btn-primary" [routerLink]="[{ outlets:{ appSteps: ['step1']} }]">Step 1</a>
    </div>
    <div class="col text-center">
      <a class="btn btn-primary" [routerLink]="[{ outlets:{ appSteps: ['step2']} }]">Step 1</a>
    </div>
  </div>

链接到子路由器出口

1 个答案: