Question

在Angular 2中，我有一个顶级菜单以及其他产品。当您单击产品时，您将获得顶级路由器插座中的产品列表。当您单击单个产品时，您将获得该单个产品的详细信息，您可以在其中单击版本等。到目前为止，这是针对嵌套的路由器插座，一切都很好。工作链接如下所示：

http://localhost:4200/products/123/versions

但是，当用户单击特定版本的详细信息时，我希望定位更高级别的路由器链接。所以当你得到以下链接时：

http://localhost:4200/products/123/versions/2

这不会再次加载到子路由器插座中，但我希望将产品（ProductComponent）显示在同一个路由器插座中（这是顶级路由器插座）。我知道当我有/ versions / 2时很容易做到，但我想保留产品的上下文。我也考虑过命名顶级插座，但这确实意味着我必须更改所有路由器链接以包含此名称。

还有其他我不知道的选择或我失踪的最佳做法吗？（在Angular 2文档中找不到一个很好的例子）

Answer 1

{ path: 'products/123/versions/:id', component: productsComponent }可以让您使用动态路径。

使用以下方法从特定cmp中捕获id：

this.paramsSub = this.activatedRoute.params.subscribe(params => this.param = params['id']);

routerLink = 'products/123/versions/'
routerLink = 'products/123/versions/2'
[routerLink] = ['products/123/versions/']
[routerLink] = ['products/123/versions/2']

Answer 2

尝试使用以下代码，

   <a [routerLink]="['/products/123/versions']" [queryParams]="{id:id}"></a>

在您的孩子路线中，您可以像这样使用

 { path: 'products/123/versions', component: productsComponent }

如何定位Angular 2中的顶级路由器插座？

2 个答案: