CODEWITHSUNDEEP
angularangular2-routing
jazza1000
jazza1000

Reputation: 4247

angular routing issues with child routes

I am having problems correctly writing a parent component with child components. When I route to the children it seems to be also re-creating the parent, which results in the html being doubled.

You can see this in the stackblitz example I have created here.

In the root of my app I have a configuration component:

@Component({
  selector: 'app-configuration',
  template: ` <app-sidebar></app-sidebar>
             <router-outlet></router-outlet>`
   })

This then contains a sidebar component, which has my list of links that I wish to navigate with.

@Component({
  selector: 'app-sidebar',
  template: `<div id="menu">
            <ul *ngFor="let gateway of gateways$ | async">
                <li><a routerLink="configure/{{gateway.toLowerCase()}}"> 
 {{gateway}}</a></li>
            </ul>
          </div>`
   })

export class SidebarComponent implements OnInit {

  gateways$:Observable<string[]>;
  constructor() { }
   ngOnInit() {
    this.gateways$ = this.getGateways()
   }
   getGateways():Observable<string[]>{
    let gateways=["CDS","MCP","CNS"]
    return of(gateways);       
}

The cause of the problem seems to be how I have defined my routes:

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

Could someone tell me whether it is possible to do what I am trying to do, the way I am doing it? I was hoping to contain the child components inside the Configuration Component so I could then have sibling components to Configuration to allow me to do other things.

Upvotes: 0

Views: 409

Answers (3)

SiddAjmera
SiddAjmera

Reputation: 39432

Three issues:

  1. In the app.component.ts template should be <router-outlet></router-outlet> and NOT <app-configuration></app-configuration>

  2. In sidebar.component.ts template should have <li><a routerLink="/configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li> and NOT <li><a routerLink="configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li>

/ is missing from the routerLink

  1. Change your Route Config to:
  const routes: Routes = [
  {
    path: 'configure', component: ConfigurationComponent,
    children: [
      { path: 'cds', component: CdsComponent },
      { path: 'mcp', component: McpComponent },
      { path: 'cns', component: CnsComponent },
    ]
  },
  {
    path: '**', redirectTo: '/configure', pathMatch: 'full'
  }
];

Here's a Working Sample StackBlitz for your ref.

Upvotes: 2

Qortex
Qortex

Reputation: 7466

You are mixing components and routing.

In app.component.ts, you always show ConfigurationComponent, so it gets displayed once.

Then you go on and route it, so you display it a second time.

Instead, in app.component.ts, the template should simply be <router-outlet></router-outlet>, so that you trigger the router you setup.

Then, in your configuration.component.ts, you can use template:`.

By the way, your ngFor* is not properly placed, it should be:

<ul>
  <li *ngFor="let gateway of gateways$ | async"><a [routerLink]="['configure', gateway.toLowerCase()]">{{gateway}}</a></li>
</ul>

Upvotes: 1

web.dev
web.dev

Reputation: 359

Try adding redirect default route to your children routes.

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path: '', redirectTo: 'cds', pathMatch: 'full'},
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

It's nice to have default path in these scenarios

If that does not work, please provide full code example (with whole routing module, not just routes)

Upvotes: 0

Related Questions