Angular2：どのように別のコンポーネント

Question

にフォームを使用して値を渡すために、私はAngular2に新たなんだと私は、単純な何かをしたいと思います：

1. は、順序を作るためのフォームを送信します。
2. 保存データベースに外部API経由ため
3. ゴー支払いページへの私の最初の質問

順序オブジェクトを保持したまま：どのように保存した後、私は他のページにオブジェクトを渡すことができますか？

私の2番目の質問：私はこの完全な「フォーム」を最善の方法で行っていますか？私は他のページにオブジェクトを渡すことができますどのように保存した後

<form [formGroup]="orderForm" #formDir="ngForm" (ngSubmit)="submitForm(formDir.value)"> 
    [...] 
</form> 

form.component

submitForm(): void { 
    this.orderService.saveOrder(this.order) 
     .then(() => this.router.navigateByUrl('/payment', ['order', this.order])); 
} 

paymentComponent

order: Order; 

constructor(route: ActivatedRoute) { 
    route.queryParams.subscribe(params => { 
     this.order = params['order']; 
    }); 
} 

Answer 1

form.html

？フォームは、操作が完了保存

後、APIから現在の保存順序オブジェクトを返し、次にDBに保存されたパスorder.idリダイレクトします。また、経路定義のrouteパラメータにorderというパラメータが記述されていることを確認してください。

submitForm(): void { 
    this.orderService.saveOrder(this.order) 
     .then((savedOrderObj) => this.router.navigateByUrl('/payment', ['order', savedOrderObj.id])); 
} 

私も最善の方法では、この全体の「フォームのことを」やっていますか？

はい、正しく表示されます。ナビゲート中にorder（id）パラメータを渡しています。そのため、paymentComponentコンポーネントは、orderパラメータがルートに渡されたことに基づいてその注文を取得できます。

routeParamsサブスクリプションコードをngOnInitフックに移動することを検討してください。コンストラクタは起動ロジックを持たないようにしてください。 orderデータの取得を完全に担当するOrderServiceを作成します。それは異なるメソッドを持つことができ、そのうちの1つはidに基づいてデータを取得することができます。 omeralperさんのコメント@

constructor(private route: ActivatedRoute, private orderService: OrderService) { 
} 
ngOnInit() { 
    this.route.queryParams.subscribe(params => { 
     this.orderService.getOrderById(params['order']).subscribe(
      (order) => this.order = order 
     ); 
    }); 
} 

Answer 2

あなたがたparamsと共に、何が起こるかである、複雑なデータオブジェクトリテラルのようなタイプの、またはあなたがURLに表示されないようにする任意のデータを渡すためにサービスを使用する必要が正しいです。

データサービス

import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataService { 
    data: {[key: string]: any}; 
} 

コンポーネントX

import {Component} from '@angular/core' 

import { DataService } from './data.service'; 

@Component() 
export class X { 

    get data(): {[key: string]: any}{ 
    return this.dataService.data; 
    } 

    set data(value: {[key: string]: any}) { 
    this.dataService.data = value; 
    } 

    constructor(public dataService: DataService) { } 

    submitForm(): void { 
    this.dataService.set(this.order); // Store order for use by next component 
    this.orderService.saveOrder(this.order) 
     .then(() => this.router.navigateByUrl('/y')); 
    } 
} 

コンポーネントY

import {Component} from '@angular/core' 

import { DataService } from './data.service'; 

@Component() 
export class Y { 

    data: { [key: string]: any }; 

    get data(): {[key: string]: any}{ 
    return this.dataService.data; 
    } 

    set data(value: {[key: string]: any}) { 
    this.dataService.data = value; 
    } 

    constructor(public dataService: DataService) { } 

    ngOnInit() { 
    this.data = this.dataService.get(); // Route component loads and you retrieve the data 
    } 
} 

あなたはトンをお勧めしますサービスを強化し、それをRouteDataServiceと呼びますが、これによりコンポーネント間の通信が可能になります。

すでにデータがある場合は、別のリクエストをしたくない場合があります。これを1〜2回行うことは害ではありませんが、アプリケーションが大きくなるにつれて、この戦略を実行するとパフォーマンスが低下します。

それ以外の場合は、コントローラのロジックとテンプレートの複雑さを維持するために、テンプレート駆動型よりも反応的なフォームが優先されますが、それは単なる設定であることを間違ってはいません。あなたが反応形式をチェックアウトしていない場合、これはまともなイントロですtutorialあなたは両方を比較することができます。