導航相對與角2路由器（第3版）

如何從/questions/123/step1使用Router無字符串連接，並指定一個/questions/123/組件內導航相對於/questions/123/step2？導航相對與角2路由器（第3版）

我在下面添加了一個自己的答案。請隨時提出更好的答案。 ;-)我想有更好的方法。

2016-08-24 Thomas Zuberbühler

做一些更多的研究後，我碰到一個

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

和

this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

第一種方法（Router.createUrlTree API），我沒有工作，也就是什麼都沒有發生。第二種方法（Router.navigate API）的作品。

但是，第二種方法使用NavigationExtras（第二個參數），其記錄在@experimental中。希望下一次發佈的版本不會有太大變化......並且NavigationExtras將會保持穩定。

任何其他建議/方法，請不要猶豫回答我上面的問題。

更新2016年10月12日

還有一個計算器問題，以及：

How do I navigate to a sibling route

更新2016年10月24日

文檔：

Routing & Navigation (Relative Navigation)

來源

2016-08-24 14:15:40

根據我的測試，它應該是'this.router.navigate（['step2']，{relativeTo：this.activatedRoute}）;'沒有../之前的路徑。 –

@XinMeng ../特定於此示例，此處的目標是嘗試向上一級，然後添加step2。所以例如'/ parent/child'會變成'/ parent/step2'，而在你的例子中變成'/ parent/child/step2'。你的例子也是有效的代碼，但是對於具體的問題要求答案是正確的。 –

您可以在下面使用，

假設questions加載到您的主router-outlet

this.router.navigate([ 
     '/', 
     { 
     outlets: { 
      primary: [ 
       // below may be replaced with different variables 
       'questions', 
       '123', 
       'step2' 
      ] 
     } 
     } 
    ])

希望這有助於！

來源

2016-08-24 14:46:33

謝謝。但我想避免寫完整的路線路徑。 –

首先，注入上構造路由器& ActivatedRoute

constructor(private route:ActivatedRoute,private router:Router) { }

然後使用Click事件：

onEditClick(){ 
     this.router.navigate(['edit'],{relativeTo:this.route});

您導航到預期page.In我的方案，我想去配方/ 1編輯食譜。 http://localhost:4200/recipes/1/edit

來源

2017-10-16 17:31:53

導航相對與角2路由器（第3版）

回答

相關問題