通过路径2角传球对象PARAMS可能吗？ [英] Angular 2 passing object via route params possible?

问题描述

我可以使用一些建议如何处理这个问题，我面对。为了解释这个最可能为你我创建了一个主要组成部分：

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

} 

}

该组件从API retreive预订并保存在你看到保留的对象（它有一个类型的保留这是一类，看起来像这样）

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>

) { }
}

当我按一下按钮客运，它会重定向到乘客页主/客，但在这里我需要发送的对象保留（全的）或只是PassengerList（阵列）。

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).

做任何知道它可能做到这一点与路线PARAMS或与路由器的出口？有什么建议？

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

推荐答案

只需使用一个共享的服务，并把它添加到提供商：[...] 父组件。

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

简单服务类

@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 chile 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;
  }
}

这篇关于通过路径2角传球对象PARAMS可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！