web-dev-qa-db-ja.com

Angular 2ルーター（バージョン3）で相対ナビゲート

ストリング連結なしでRouterを使用し、/questions/123/step1を指定して、コンポーネント内で/questions/123/step2から/questions/123/に相対移動する方法

以下に独自の回答を追加しました。より良い答えを提案してください。 ;-)より良いアプローチがあると思います。

angulartypescriptangular2-routing
46
Thomas Zuberbühler

さらにいくつかの研究を行った後、私はに出会いました

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

そして

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

最初のアプローチ（ Router.createUrlTree API ）は私にはうまくいきませんでした。つまり、何も起こりませんでした。 2番目のアプローチ（ Router.navigate API ）は機能します。

ただし、2番目のアプローチでは、@experimentalで文書化されているNavigationExtras（2番目の引数）を使用します。次回のリリースで大きな変更が起こらないことを願っています...そしてNavigationExtrasは安定します。

他の提案/アプローチは、上記の私の質問に答えることをheしないでください。

2016-10-12を更新

また、別のstackoverflowの質問があります：

2016-10-24を更新

ドキュメンテーション：

2019-03-08を更新

Angular 7.1に変更があったようです。 Angular 7.1でそれを解決する方法については、別の投稿に回答があります。 https://stackoverflow.com/a/38634440/42659 を参照してください。

68
Thomas Zuberbühler

まず、コンストラクターにルーターとActivatedRouteを挿入します

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

次に、クリックイベントに使用します。

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

期待されるページに移動します。私のシナリオでは、レシピ/ 1に移動してレシピを編集したかったのです。 http：// localhost：4200/recipes/1/edit

8
Shahin Al Kabir Mitul

以下を使用できますが、

仮定はquestionsがプライマリrouter-outletにロードされます

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

お役に立てれば！！

1
Madhu Ranjan