首页 文章

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

提问于
浏览 次
2

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

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

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

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

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

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

angular angular2-routing

2 回答

  • 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']
    回复于
  • 1

    尝试使用以下代码，

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

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

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

相关问题