我理解组件之间的路由和传递信息通常如何在Angular 2中工作。例如,您将使用以下类型的设置来加载组件和附带的特定ID:
<a *ngFor="let product of products"
[routerLink]="['/product-details', product.id]">
{{ product.name }}
</a>
但是,假设您已经在路线上,现在您想要点击链接以加载新路线(信息详细信息较窄),但您访问的所有数据都在同一产品中。来源你刚刚点击的那个(因为它们是从api(mongoDB)中的相同的api端点和product.id绘制的)。你会怎么做呢?
在这种情况下,您不能只传递“product.id”,因为您希望访问与上一个路径/组件相同的product.id中的数组。所以你想要一个新的路由,但是来自同一数据源的信息(相同的product.id)。为了澄清,新路由对组件具有“联系”,然后对于特定参数具有“contact.id”。但是,它不是一个单独的数据源,因为“contact.id”是我在product.id中的一个数组值。我只是点击了它。你会怎么做?
目前我已经开辟了一条新路线,列出了“联系方式”,然后列出了具体的联系人ID - 所以路线如下:http://localhost:4200/contact/21469568eds3913283df5cs。所以这是按预期工作的。请注意,此处列出的联系人ID位于我的product.id数组中 - 它不是一个不同的数据源。那么如何在新路由中访问上一个路由的id中的信息呢?因为 - 再次 - 相同的数据源,只是新的路线。现在我在新组件/路线中遇到“未定义”错误。
答案 0 :(得分:1)
这可能是一个设计问题。如果您有使用product
的路线,然后打开分配给该特定contact
的{{1}}(正如您所说的联系人是您产品中的数组),那么你也应该在你的路线中反映出来。例如
product
这样您就可以在路线中获得所有相关的背景信息。在这种情况下,Resolver对于符合模式的所有路径都非常有意义
/product/:productId/contact/:contactId
即使您已激活了指向联系人详细信息的路由,您也可以轻松访问该产品。如果您期望为同一productId调用多个路由(并且产品价格昂贵,例如由于复杂的SQL连接,或者很少会发生变化),那么在/product/:productId/**
内缓存产品可能是有意义的