Loading a child component as a new page, not as part of the body of the parent-CodePudding

I'm trying to add nested navigation to my site and I'm struggling to understand how to load the child component without having to add a router-outlet to the parent component. At the moment, this is causing the body of the child component to load below the body of the parent.

For instance, say I have 3 components in my project:

Product-Types: Guitars, Pianos, Drums;

Product-Page: Fender, Gibson, Cort;

Product-Details: Fender.description

with the contents of Product-Page and Product-Details representing an example of navigating to Guitars, then to Fender, respectively.

The URL would look like this: "musicshop.com/instruments/guitars/product-id"

Product-Page and Product-Details are both passed to the route as parameters:

path: 'instruments',

    children: [
      {
        path: ':productType',
        component: ProductPageComponent,
        
      },
      {
        path: ':productId',
        component: ProductDetailsComponent,
      }
    ]

Navigating to "musicshop.com/instruments/guitars" gives you a list of products (guitars), which is the desired outcome.

Navigating to "musicshop.com/instruments/guitars/product-id" keeps the /guitars component rendered and loads the /product-id component below.

What I would like to happen, is for /product-id to navigate to a new component and render a new body, as it would be loaded from the router-outlet in app.component; keeping the header and footer the same.

I've looked at many examples online and at github repos, angular documentation and various videos, but haven't found anything that directly answers my question. The issue typically is that either the child or parent route isn't parameterized, or the body of the child is loaded to the same body as the parent.

I think the issue is likely with my fundamental understanding of routing. What would be the usual method of handling this kind of routing? It's certainly commonplace, so I'm surprised I've not managed to find a 1-1 example.

Thanks in advance.

CodePudding user response：

You are having same parameter for 2 different routes. Although the name of the 2 parameters is different (:productType & :productId), for Angular, while navigating, they are the same (a simple string parameter).

Since, path: ':productType' is written first, Agular loads that route when it matches musicshop.com/instruments/guitars/. You can check it by placing :productId route item first in the array. Angular will load ProductDetailsComponent this time.

A parent should have distinguishing routes to load separate pages.

You need to tell Angular, that your detail page has a different route like this:

children: [
      {
        path: ':productType',
        component: ProductPageComponent,
        
      },
      {
        path: ':productType/:productId',
        component: ProductDetailsComponent,
      }

Now, Angular will load your ProductDetailsComponent only when you navigate to "musicshop.com/instruments/guitars/product-id". & ProductPageComponent component only when you navigate to "musicshop.com/instruments/guitars"