[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか？

質問

私のAngular 2ルートのテンプレートの一つで( ファーストコンポーネント ) ボタンがあります。

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

私の ゴール を達成することです。

ボタンクリック -> のルートを、データを保持したまま、他のコンポーネントをディレクティブとして使用することなく、他のコンポーネントに移動させる。

こんな感じでやってみました...。

1番目のアプローチ

同じビューに、ユーザーインタラクションに基づく同じデータを収集して保存しています。

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

通常、私は SecondComponent によって

 this._router.navigate(['SecondComponent']);

によって最終的にデータを渡します。

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

一方、パラメータ付きのリンクの定義は次のようになります。

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

この方法の問題点は、私が推測するところでは 複雑なデータを渡すことができない (例えば オブジェクト property3のように)in-urlで表示されます。

2番目のアプローチ

別の方法として、SecondComponentを以下のように含めることができます。 ディレクティブ をFirstComponentの中に入れてください。

  <SecondComponent [p3]="property3"></SecondComponent>

しかし、私は ルート を、そのコンポーネントにインクルードするのではなく、そのコンポーネントへ転送します。

第3のアプローチ

ここで私が考える最も現実的な解決策は サービス (例：FirstComponentService)を使って

• 店舗 FirstComponentのrouteWithData()でデータ(_firstComponentService.storeData())を取得します。
• 取得する のデータ（_firstComponentService.retrieveData())を取得します。 ngOnInit() で セカンドコンポーネント

この方法は完全に実行可能なように見えますが、目標を達成するための最も簡単で/最もエレガントな方法であるかどうかは疑問です。

一般的に、私は、他の 可能性のあるアプローチ コンポーネント間のデータの受け渡し、特に できるだけ少ないコード量で

解決方法は？

4.0.0アップデート

Angularを見る Angular Router - ナビゲートする前にデータを取得する をご覧ください。

オリジナル

サービスを利用するのがよいでしょう。route paramsには、ブラウザのURLバーに反映させたいデータのみを渡してください。

参照：Angular Angular Cookbook コンポーネント通信 - 双方向サービス .

RC.4で出荷されたルーターでは、再度 data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch: 'full'},
  {path: 'heroes', component: HeroDetailComponent, data: {some_data: 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

以下もご参照ください。 プランカー .