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

Question

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

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

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

提前致谢。

Answer 1

您有 2 条不同路线的相同参数。虽然这两个参数的名称不同（:productType& :productId），但对于 Angular 来说，在导航时，它们是相同的（一个简单的字符串参数）。

由于path: ':productType'是先写的，Agular 在匹配 时会加载该路由musicshop.com/instruments/guitars/。您可以通过将:productId路由项放在数组中的第一位来检查它。ProductDetailsComponent这次Angular 将加载。

父级应该有不同的路由来加载单独的页面。

你需要告诉 Angular，你的详细信息页面有一个不同的路线，如下所示：

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

现在，Angular 只会ProductDetailsComponent在您导航到“musicshop.com/instruments/guitars/product-id”时加载您的内容。ProductPageComponent仅当您导航到“musicshop.com/instruments/guitars”时才使用&组件