Angular 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 中检索预订并将其保存在您看到的预订对象中（它有一种预订类型 class，如下所示）

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>

) { }
}

当我点击 Passenger 按钮时，它会重定向到乘客页面 Main/passenger，但这里我需要发送预订对象（整个）或仅发送 PassengerList（数组）。

有人知道是否可以使用路由参数或路由器插座来做到这一点吗？有什么建议吗？

Answer 1

只要使用一个共享服务，并将其添加到父组件的providers: [...]。

简单服务class

@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() 是所有事物的共同祖先，也是一个有效的选项。这取决于您的具体要求。如果您在组件中提供它，那么该组件将成为共享单个实例的树的根。这样您就可以指定服务的范围。如果范围应为 "your entire application"，则在 bootstrap() 或根组件中提供它。 Angular2 风格指南鼓励支持根组件的 providers 而不是 bootstrap()。结果将是相同的。如果您只想在组件 A 和添加到其 <router-outlet> 的其他组件之间进行通信，那么将范围限制到该组件 A.

是有意义的

Angular 2 可以通过路由参数传递对象吗？

Angular 2 passing object via route params possible?

angular2-routing

angular