如何在Angular 2中定位頂級路由器插座？

在Angular 2中，我有一個頂級菜單以及其他產品。當您點擊產品時，您將獲得頂級路由器插座中的產品列表。當您點擊某個產品時，您會看到該產品的詳細信息，您可以在其中點擊版本等。到目前爲止，這個目標嵌套在路由器上，一切都很好。工作鏈接看起來是這樣的：如何在Angular 2中定位頂級路由器插座？

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

然而，當用戶點擊特定版本的細節，我想針對更高層次的路由器鏈路。因此，當你下面的鏈接：

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

這不加載到子路由器出口了，但我想指定的同一個路由器出口的產品（ProductComponent）的結果顯示（這是頂級路由器插座）。我知道當我剛剛擁有/版本/ 2時很容易做到，但我希望將產品的上下文保留在那裏。我也看到了命名頂級插座，但這意味着我必須更改所有的routerlink以包含此名稱。

是否有另一個選項我不知道或缺少最佳做法？（找不到在角2個文檔一個很好的例子）

來源

2017-03-26 Arwin

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

來源

2017-03-27 05:12:38 Gary

謝謝，我想我明白，我必須添加在同一層級的ProductComponent路由器的配置項，而不是作爲ProductVersions的一個孩子，它是ProductComponent的子元素等。 – Arwin

沒錯。您可以直接在ProductComponent的路徑定義中指定'ROUTE /：id'，並使用訂閱到activatedRoute.params – Gary

再次感謝，而不是創建一個孩子。我想通過這種方式找到了我需要的多個參數的答案：http://stackoverflow.com/questions/37903073/angular-2-angular-router-3-0-0-alpha-7-accessing-multiple α參數 – Arwin

嘗試使用下面的代碼，

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

而且在你的孩子的路線，你可以使用這樣

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

來源

2017-03-27 05:05:41 Vignesh

如何在Angular 2中定位頂級路由器插座？

回答

相關問題