我正在尝试向我的网站添加嵌套导航,但我正在努力理解如何加载子组件,而无需向父组件添加路由器导出。 目前,这导致子组件的主体加载到父组件的主体下方。
例如,假设我的项目中有 3 个组件:
产品类型:吉他、钢琴、鼓;
产品页面:Fender、Gibson、Cort;
产品详细信息:Fender.description
产品页面和产品详细信息的内容分别代表导航到 Guitars,然后导航到 Fender 的示例。
网址如下所示:“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 存储库、 Angular 文档和各种视频中查看了许多示例,但没有找到任何可以直接回答我的问题的内容。问题通常是子路由或父路由未参数化,或者子路由的主体加载到与父路由相同的主体。
我认为问题可能出在我对路由的基本理解上。处理这种路由的通常方法是什么?这当然很常见,所以我很惊讶我没有找到一对一的例子。
提前致谢。
最佳答案
您的 2 条不同路线具有相同的参数。虽然这两个参数的名称不同(:productType
& :productId
),但对于 Angular 来说,在导航时,它们是相同的(一个简单的字符串参数)。
由于 path: ':productType'
首先写入,Agular 在匹配 musicshop.com/instruments/guitars/
时加载该路由。您可以通过将 :productId
路由项放在数组的第一位来检查它。这次 Angular 将加载 ProductDetailsComponent
。
A parent should have distinguishing routes to load separate pages.
您需要告诉 Angular,您的详细信息页面有一个不同的路线,如下所示:
children: [
{
path: ':productType',
component: ProductPageComponent,
},
{
path: ':productType/:productId',
component: ProductDetailsComponent,
}
现在,仅当您导航到“musicshop.com/instruments/guitars/product-id”时,Angular 才会加载您的 ProductDetailsComponent
。 & 仅当您导航到“musicshop.com/instruments/guitars”时 ProductPageComponent
组件
关于html - 将子组件作为新页面加载,而不是作为父组件主体的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71001157/