我可以使用一些建议来解决我面临的这个问题。为了尽可能地向您解释这一点,我创建了一个主要组件:
@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 检索预订并将其保存在您看到的预订对象中(它有一种 Reservation 类型,它是一个如下所示的类)
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>
) { }
}
当我单击“乘客”按钮时,它将重定向到乘客页面“主/乘客”,但这里我需要发送预订对象(整个)或仅发送乘客列表(数组)。
有谁知道是否可以使用路由参数或路由器出口来做到这一点?有什么建议么?