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

Question

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

例如，假设我的项目中有 3 个组件：

产品类型：吉他、钢琴、鼓；

产品页面：Fender、Gibson、Cort；

产品详情：Fender.description

Product-Page 和 Product-Details 的内容分别代表导航到 Guitars 和 Fender 的示例。

URL 看起来像这样：“musicshop.com/instruments/guitars/product-id”

Product-Page 和 Product-Details 都作为参数传递给路由：

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

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

提前致谢。

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,
      }

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

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

Loading a child component as a new page, not as part of the body of the parent

html

url

routes

typescript

angular