Angular 2 可以通过路由参数传递对象吗? [英] 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 中检索预订并将其保存在您看到的预订对象中(它有一个 Reservation 类型，它是一个看起来像这样的类)

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>

) { }
}

当我点击按钮Passenger时，它会重定向到乘客页面Main/passenger，但在这里我需要发送预订对象(整个)或只发送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).

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

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

推荐答案

只需使用共享服务并将其添加到父组件的 providers: [...] 即可.

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

更新

bootstrap() 是所有事物的共同祖先，也是一个有效的选项.这取决于您的确切要求是什么.如果您在组件中提供它，则该组件将成为共享单个实例的树的根.通过这种方式，您可以指定服务的范围.如果范围应该是您的整个应用程序"，则在 bootstrap() 或根组件中提供它.Angular2 风格指南鼓励使用根组件的 providers 而不是 bootstrap().结果会是一样的.如果您只想在组件 A 和添加到其 的其他组件之间进行通信，那么将范围限制为该组件是有意义的A.

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.

这篇关于Angular 2 可以通过路由参数传递对象吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！