角度2の経路オブジェクトを経由してオブジェクトを渡すことは可能ですか？

Question

私はこの問題に近づく方法をいくつかアドバイスしています。私は、メインコンポーネントを作成しているあなたのためにこれ可能な限り最高を説明するために：

@Component({ 
selector: 'main-component', 
providers: [...FORM_PROVIDERS, MainService, MainQuoteComponent], 
directives: [...ROUTER_DIRECTIVES, CORE_DIRECTIVES, RouterOutlet, MainQuoteComponent ], 
styles: [` 
    agent { 
     display: block; 
    } 
`], 
pipes: [], 
template: ` 
    **Html hidden** 
    `, 
    bindings: [MainService], 
}) 

@RouteConfig([ 
    { path: '/', name: 'Main', component: MainMenuComponent, useAsDefault: true }, 
    { path: '/passenger', name: 'Passenger', component: PassengerComponent }, 
]) 

@Injectable() 
export class MainComponent { 

bookingNumber: string; 
reservation: Reservation; 
profile: any; 

constructor(params: RouteParams, public mainService: MainService) { 

    this.bookingNumber = params.get("id"); 

    this.mainService.getReservation(this.bookingNumber).subscribe((reservation) => { 

     this.reservation = reservation; 
    }); 

    this.profile = this.mainService.getUserDetails(); 

} 

} 

このコンポーネントは、APIから予約を盗ん、あなたが（それは、そのクラスでの予約の種類を持っている参照して、予約オブジェクトに保存しますこのようになります）私はボタンの旅客をクリックすると

export class Reservation { 

constructor(
    public Id: number, 
    public BookingNumber: string, 
    public OutboundDate: Date, 
    public ReturnDate: Date, 
    public Route: string, 
    public ReturnRoute: string, 
    public Passengers: string, 
    public Pet: string, 
    public VehicleType: string, 
    public PassengersList: Array<Passengers> 

) { } 
} 

、それは乗客のページメイン/助手席にリダイレクトされますが、ここで私は、予約オブジェクト（全1）または単にPassengerList（配列を送信する必要があります）。

ルートパラメータまたはルータのアウトレットでこれを行うことが可能かどうかは知りませんか？助言がありますか？

Answer 1

共有サービスを使用して、親コンポーネントのproviders: [...]に追加するだけです。親で

シンプルなサービスクラス

@Injectable() 
export class ReservationService { 
    reservation:Reservation; 
} 

プロバイダにそれを追加してのみ（プロバイダーに追加しないでください）、それを注入コンストラクタで子コンポーネントで

@Component({... 
    providers: [ReservationService] 
export class Parent { 
    constructor(private reservationService:ReservationService) {} 

    someFunction() { 
    reservationService.reservation = someValue; 
    } 
} 

を、それを注入

@Component({... 
    providers: [] 
export class Passenger { 
    constructor(private reservationService:ReservationService) { 
    console.log(reservationService.reservation); 
    } 

    someFunction() { 
    reservationService.reservation = someValue; 
    } 
} 

更新

bootstrap()は、すべての共通の祖先であり、有効なオプションです。あなたの正確な要件が何であるかによって異なります。コンポーネントで提供すると、このコンポーネントは単一のインスタンスを共有するツリーのルートになります。このようにして、サービスのスコープを指定することができます。スコープが「アプリケーション全体」である場合は、bootstrap()またはルートコンポーネントに指定します。 Angular2スタイルのガイドでは、bootstrap()を超えるルートコンポーネントのprovidersを推奨します。しかし結果は同じになります。コンポーネントAとその<router-outlet>に追加されている他のコンポーネントとの間で通信を行いたい場合は、スコープをこのコンポーネントAに限定するのが理にかなっています。