CODEWITHSUNDEEP
angular
Joe
Joe

Reputation: 5497

Linking to child router outlet

I have the following routes defined in a child route module

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

where the parent routes look like this

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

In my dashboard component, I have a navigation bar where I would like to link to a component inside a nested router-outlet, so "Step 1" and "Step" would show inside the router-outlet when the links are clicked.

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

When the applications/application route is activated, the Step1 component is displayed correctly, but if I try to use the nav bar, I end up with errors in the console telling me Error: Cannot match any routes. URL Segment: 'applications/application/step1'.

I have tried variations of the path to step1, but still end up with the same error.

I'm sure that what I am trying to do is possible, but I'm obviously not searching for the right terms... What's the correct way to do this?

Upvotes: 0

Views: 57

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27471

You should follow this syntax for activating secondary router-outlet 

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

Upvotes: 1

Related Questions