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

Question

在 Angular 2 中，我有一个包含其他产品的顶级菜单。当您单击产品时，您会在顶级路由器插座中获得产品列表。当您随后单击单个产品时，您将获得该单个产品的详细信息，您可以在其中单击版本等。到目前为止，这针对嵌套的路由器插座并且一切正常。一个有效的 link 看起来像这样：

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

但是，当用户点击特定版本的详细信息时，我想针对更高级别的路由器-link。所以当你得到以下 link:

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

这不会再次加载到子路由器插座中，但我想以显示产品 (ProductComponent) 的同一个路由器插座为目标（这是顶级路由器插座）。我知道当我只有 /versions/2 时这很容易做到，但我想将产品的上下文保留在那里。我还查看了顶级插座的命名，但这确实意味着我必须更改所有路由器 link 以包含此名称。

是否还有其他我不知道的选项或我缺少的最佳实践？（在 Angular 2 个文档中找不到很好的示例）

Answer 1

尝试使用下面的代码，

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

在你的子路由中你可以这样使用

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

Answer 2

{ 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']

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

How can I target the top level router-outlet in Angular 2?

angular2-routing

angular