我正在尝试向我的网站添加嵌套导航，并且我正在努力理解如何加载子组件，而无需向父组件添加路由器出口。目前，这导致子组件的主体加载到父组件的主体下方。
例如，假设我的项目中有 3 个组件：
产品类型：吉他、钢琴、鼓；
产品页：Fender、Gibson、Cort；
产品详细信息：Fender.description
产品页面和产品详细信息的内容分别代表导航到 Guitars，然后导航到 Fender 的示例。
URL 如下所示：“musicshop.com/instruments/guitars/product-id”
产品页面和产品详细信息都作为参数传递给路由：
path: 'instruments',
children: [
{
path: ':productType',
component: ProductPageComponent,
},
{
path: ':productId',
component: ProductDetailsComponent,
}
]
导航到“musicshop.com/instruments/guitars”将为您提供产品（吉他）列表，这是所需的结果。
导航到“musicshop.com/instruments/guitars/product-id”可保持 /guitars 组件的渲染并加载下面的 /product-id 组件。
我希望发生的是 /product-id 导航到新组件并渲染新主体，因为它将从 app.component 中的路由器出口加载；保持页眉和页脚相同。
我在网上和 github 存储库、角度文档和各种视频中查看了许多示例，但没有找到任何可以直接回答我的问题的内容。问题通常是子路由或父路由未参数化，或者子路由的主体加载到与父路由相同的主体。
我认为问题可能出在我对路由的基本理解上。处理这种路由的通常方法是什么？这当然很常见，所以我很惊讶我没有找到一对一的例子。
提前致谢。