html - 将子组件作为新页面加载，而不是作为父组件主体的一部分

Question

我正在尝试向我的网站添加嵌套导航，但我正在努力理解如何加载子组件，而无需向父组件添加路由器导出。目前，这导致子组件的主体加载到父组件的主体下方。

例如，假设我的项目中有 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 文档和各种视频中查看了许多示例，但没有找到任何可以直接回答我的问题的内容。问题通常是子路由或父路由未参数化，或者子路由的主体加载到与父路由相同的主体。

我认为问题可能出在我对路由的基本理解上。处理这种路由的通常方法是什么？这当然很常见，所以我很惊讶我没有找到一对一的例子。

提前致谢。

Answer 1

您的 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 组件