Angular 2 возможно передать объект через параметры маршрута?

Я мог бы посоветовать, как подойти к этой проблеме, с которой я столкнулся. Чтобы объяснить это для вас, я создал основной компонент:

@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

Просто используйте общую службу и добавьте ее в 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 поощряет providers корневого компонента над bootstrap(). Результат будет таким же, хотя. Если вы просто хотите установить связь между компонентом A и другими компонентами, добавленными в его <router-outlet>, тогда было бы целесообразно ограничить область этого компонента A.