3

Updated to clarify my problem

I'm trying to get routes with children and named outlets work but with no luck. The origin idea is to build a tabbed navigation, to have deep links inside my app. I've break down my sample stackblitz project to the real problem for better understanding. It seems like it is navigating to the route ´/(list:first/(detail:second))´ but the DetailComponent will not load. I need a primary route with multiple child routes and named outlets ('list', detail', ...) to represent a url chain build up: /overview/(list:first) (first tab), /overview/(list:first/(detail:second)) (second tab), and so on.

The [routerLink] on the a tag looks like this: <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>

After some more research it seems like the route /overview/list/(detail:detail/1) is found: NavigationEnd {id: 2, url: "/overview/(list:first/(detail:second))", urlAfterRedirects: "/overview/(list:first/(detail:second))"} ...

My overview.component.html looks like this:

<h2>Overview</h2>
<router-outlet name="list"></router-outlet>
<router-outlet name="detail"></router-outlet>

It is working when the named outlet 'detail' is inside my list.component.html.

<p>
   <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>
</p>
<router-outlet name="detail"></router-outlet>

But this is not what I want.

So I think I don't have a route config problem, but a problem with nested components. Is this case not intended? Do you have any other ideas to solve this problem?

This is my Router-Module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {ListComponent} from '../overview/list/list.component';
import {DetailComponent} from '../overview/detail/detail.component';
import {OverviewComponent} from '../overview/overview.component';

const routes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    children: [
      {
        path: 'first', component: ListComponent, outlet: 'list', children: [
          { path: 'second', component: DetailComponent, outlet: 'detail'
          }
        ]
      }
    ],
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, {enableTracing: true}) ],
  exports: [ RouterModule ]
})
export class RouteModule { }

Please see my stackblitz project: https://stackblitz.com/edit/angular-jgattb

Thank you for your help!

ratfury
  • 203
  • 2
  • 9

0 Answers0