特定の内部ルートパラメータをAngular2で変更する方法

Question

さまざまな種類のデータを表示できるカレンダーを作成しています。次の例では、私が思う私のURLの構造について説明します。

• todo/2017/01/01ドス
• birthdays/2017/01/01誕生日
• todo/2017/01ドス
• birthdays/2017/01誕生日の月ビューの月ビューの日ビューの日ビューを
• todo/2017 todosの年表
• birthdays/2017年齢誕生日

私は

this.router.navigate([#HARDCODED# 'todo' #OR# 'birthday', year, ?month, ?day]) 

経由Dateオブジェクトを渡すと、再ルーティングすることができる持って今まで問題は、私はtodo/2017/01/01 =>birthdays/2017/01/01 OR todo/2017/01 =>birthdays/2017/01からナビゲートできるようにしたいということです。いくつかは、私は午前どのビューに応じて、存在しない場合がありますので、

だから私は、日付パラメータを渡すことはできません。

は、どのように私は一つだけ、内部パラメータを切り替えて再ルーティングすることができますか？

this.router.navigate(['todo', {ignoreTheRest: true}]) 

よう

何かそうでなければ私はすべての可能な組み合わせのための複雑なswitch文を記述する必要があります。

Answer 1

documentationのように、組み込みのActivatedRouteサービス（「ルート情報のワンストップショップ」）を使用してこれを実現できます。

まず、コンポーネントのコンストラクタにサービスを注入する必要があります。

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

次に、あなたのngOnInit（）関数の中で、あなたはあなたのActivatedRouteインスタンスのurlプロパティ、に加入する必要があります：あなたは藤堂コンポーネントに誕生日のコンポーネントを持っていると仮定すると、いずれの場合には、コンストラクタは次のようになります。観察可能：

ngOnInit() { 
    this.currentRoute.url 
     .subscribe(routeParts => { 
      this.periodArray = []; 
      for (let i = 1; i < routeParts.length; i++) { 
       this.periodArray.push(routeParts[i].path); 
      } 
     }); 
} 

コンポーネントルートが観察可能として設けた理由は、コンポーネントのライフサイクルの間に、それはいくつかの異なったルートを受け取ることができるということです。 "/ todo/2017"や "todo/2017/01"などのように、あなたのコンポーネントは一度だけ作成され、ngOnInit（）も一度だけ呼び出されますが、ActivatedRoute.urlのオブザーバブルを購読すれば、現在のルートについて常に通知されます。

上記のコードブロックは、アクティブなルートの最初のurl部分を除いたすべての配列で配列を塗りつぶします。これにより、最初の "/ todo"または "/ birthday"セグメントを除くすべてのパラメータが渡されます。

今、あなたは、単にこのパラメータ配列の先頭に必要なパスを追加することによって、他のコンポーネントにナビゲート、のようなことができます。

navigateBirthdays() { 
    this.periodArray.unshift('/birthday'); 
    this.router.navigate(this.periodArray); 
} 

ここ藤堂コンポーネントの完全なコードであり、それはテンプレートです：

todo.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 

@Component({ 
    templateUrl: './todo.component.html', 
}) 
export class TodoComponent implements OnInit { 

    periodArray = []; 
    constructor(private currentRoute: ActivatedRoute, private router: Router) { } 

    ngOnInit() { 
    this.currentRoute.url 
     .subscribe(routeParts => { 
     this.periodArray = []; 
     for (let i = 1; i < routeParts.length; i++) { 
      this.periodArray.push(routeParts[i].path); 
     } 
     }); 
    } 

    navigateBirthdays() { 
    this.periodArray.unshift('/birthday'); 
    this.router.navigate(this.periodArray); 
    } 
} 

todo.component.html

<p> 
    List of Todo items for {{periodArray.join("-")}} 
</p> 
<button (click)="navigateBirthdays()">Show Birthday items</button> 

誕生日コンポーネントは実質的に同じに見えます。上記では「/ todo/2017/1/3」と「/ birthday/2017/1/3」の間、「/ todo/2017」と「/ birthday/2017」の間を行き来することができます。特定のルーティングルールを設定する必要はありません。

サイドノート：オプションのパラメータの場合、URLパスに含めるのではなく、オプションのルートオブジェクトとして提供する方が良いでしょう。this sectionのドキュメントを参照してください。