gpt4 book ai didi

Angular 2 通过路由参数传递对象可能吗?

转载 作者:太空狗 更新时间:2023-10-29 16:51:32 25 4
gpt4 key购买 nike

我可以使用一些建议来解决我面临的这个问题。为了尽可能地向您解释这一点,我创建了一个主要组件:

@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>

) { }
}

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

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

最佳答案

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

简单的服务类

@Injectable()
export class ReservationService {
reservation:Reservation;
}

在父类中将其添加到提供者中并将其注入(inject)到构造函数中

@Component({...
providers: [ReservationService]
export class Parent {
constructor(private reservationService:ReservationService) {}

someFunction() {
reservationService.reservation = someValue;
}
}

在子组件中只注入(inject)它(不要添加到提供者)

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

关于Angular 2 通过路由参数传递对象可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35478994/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com