javascript - 访问相同数据源时路由到新路由

Question

我了解 Angular 2 中组件之间的路由和传递信息通常是如何工作的。例如，您可以使用以下类型的设置来加载组件和随附的特定 id:

<a *ngFor="let product of products"
  [routerLink]="['/product-details', product.id]">
  {{ product.name }}
</a>

但是假设您已经在路线上，现在您想要单击链接来加载新路线(信息详细信息范围更窄)，但您访问的所有数据都在同一个 Product.id 源中作为您刚刚点击离开的那个(因为它们从您的 api (mongoDB) 中的相同 api 端点和 Product.id 提取)。你会怎样做呢？

在这种情况下，您不能只传递“product.id”，因为您想要访问与之前的路由/组件相同的product.id 内的数组。因此，您需要一条新路线，但信息来自相同的数据源(相同的product.id)。澄清一下，新路由的组件有“contact”，然后有特定参数的“contact.id”。但是，它不是一个单独的数据源，因为“contact.id”是我刚刚单击的product.id 内的一个数组值。你会怎么做？

目前，我打开了一条新路线，其中列出了“联系人”，然后列出了特定的联系人 ID - 因此路线如下所示:http://localhost:4200/contact/21469568eds3913283df5cs 。所以这正如预期的那样工作。只是提醒一下，此处列出的联系人 ID 位于我的 Product.id 数组中 - 它不是不同的数据源。那么如何在新路由中访问之前路由的 id 信息呢？因为 - 同样 - 相同的数据源，只是新的路线。现在我在新组件/路由中遇到“未定义”错误。

Answer 1

这可能是一个设计问题。如果您有一条通往 product 的路线与您一起工作，然后打开 contact分配给特定的 product (正如您所说，联系人是您产品中的一个数组)，那么您也应该在您的 route 反射(reflect)这一点。例如

/product/:productId/contact/:contactId

这样您就可以在 route 获得所有相关的上下文信息。在这种情况下，Resolver对于符合该模式的所有路线都非常有意义

/product/:productId/**

这样，即使您已经激活了联系人详细信息的路由，您也可以轻松访问该产品。将产品缓存在ProductResolver内如果您期望为同一产品 ID 调用多个路由(并且该产品的获取成本昂贵，例如由于复杂的 SQL 连接，或者很少会更改)，则可能有意义。