如何正确设置角度嵌套路由

Question

I'm trying to setup angular route with nested path. parent page is /list child page is /list/:id

for some reason, the following route doesnt work. if I navigate to /list/:id , the route is found, but it loads ListComponent instead of ViewComponent

{
  path: 'list',
  component: ListComponent,
  children: [
    {
      path: ':id',
      component: ViewComponent
    }
  ]
}

I'm pretty sure this is the same setup as the example in angular doc . am I missing something?

the following works, but it has the wrong hierarchy, /list is siblings to /list/:id

{
  path: 'list',
  children: [
    {
      path: '',
      component: ListComponent
    },
    {
      path: ':id',
      component: ViewComponent
    }
  ]
}

see stackblitz example

Answer 1

In the first example, since ViewComponent is a child of ListComponent, you have to add <router-outlet></router-outlet> in list.component.html, based on your stackblitz example:

<p>
list works!
</p>

<a [routerLink]="['./view']">view</a>
or 
<button (click)="buttonClick()">view</button>

<!-- add the line below here-->
<router-outlet></router-outlet>

ViewComponent is here loaded where you place the router outlet.

This will make angular to load both ListComponent and ViewComponent when you go to the route /list/:id, since ViewComponent is a child of ListComponent.

Every route with children, needs to have the <router-outlet></router-outlet> tag.

This architecture is useful for example (and many other types of situations) if ListComponent is a navigation sidebar, and ViewComponent contains data from backend.

Edit

If you don't want to load both ListComponent and ViewComponent when you visit the /list/:id route, you could change your routes to look like this:

const mainRoutes: Routes = [
  {
    path: 'list',
    component: ListComponent,
  },
  {
    path: 'list/:id',
    component: ViewComponent
  }
];

When you are going with this architecture only ViewComponent is loaded when you visit 'list/:id', since ViewComponent is not a child of ListComponent.

In this example you shouldn't use the router-outlet in list.component.html

Answer 2

Since ViewComponent is a child component, you've to render it inside parent component. You can do it by adding <router-outlet></router-outlet> in the ListComponent. It will solve your problem.

Answer 3

Previously, in a project, I have done it the following way (I changed the names of the components to match your components):

const routes: Routes = [
{
  path     : 'list',
  component: ListComponent      
},
{
  path     : 'list/:id',
  component: ViewComponent      
},
  {
    path     : '**',
    component: ListComponent        
  }  
];

And then in the imports:

@ngModule({
    imports: [RouterModule.forChild(routes)]
})

Hope that helps.