'Loading a child component as a new page, not as part of the body of the parent
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
