Angular 2 passing object via route params possible?

Question

I could use some advice how to approach this problem I'm facing. To explain this best possible for you I have created a main component:

@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();

} 

}

This component retreive a booking from the api and save it in the reservation object you see (It has a type of Reservation which is a class that looks like this)

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>

) { }
}

When I click the button Passenger, It will redirect to the passenger page Main/passenger, but here I need to send the reservation object (the whole one) or just the PassengerList (the array).

Do any know if its possible to do this with route params or with the router-outlet? Any suggestions?

Answer 1

Just use a shared service and add it to the providers: [...] of the parent component.

Simple service class

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

In parent add it to the providers and inject it in the constructor

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

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

In the child component only inject it (don't add to providers)

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

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

update

bootstrap() is the common ancestor of everything and a valid option. It depends on what your exact requirements are. If you provide it at a component, then this component becomes the root of the tree that shares a single instance. This way you can specify the scope of a service. If the scope should be "your entire application" then provide it in bootstrap() or the root component. The Angular2 style guide encourages to favor providers of the root component over bootstrap(). The result will be the same though. If you just want to communicate between a component A and other components that are added to its <router-outlet> then it would make sense to limit the scope to this component A.