Góc 2 đối tượng truyền qua thông số tuyến đường có thể?

Question

Tôi có thể sử dụng một số lời khuyên cách tiếp cận vấn đề này mà tôi đang gặp phải. Để giải thích điều này tốt nhất có thể cho bạn tôi đã tạo ra một thành phần chính:

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

} 

} 

Thành phần này truy xuất đặt phòng từ api và lưu nó trong đối tượng đặt phòng mà bạn nhìn thấy (Nó có một loại Reservation mà là một lớp trông như thế này)

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> 

) { } 
} 

Khi tôi nhấp vào nút tải hành khách, Nó sẽ chuyển hướng đến trang hành khách chính/hành khách, nhưng ở đây tôi cần phải gửi các đối tượng đặt phòng (toàn bộ) hoặc chỉ là PassengerList (mảng).

Bạn có biết liệu có thể thực hiện điều này với thông số tuyến đường hoặc với bộ định tuyến không? Bất kỳ đề xuất?

Answer 1

Chỉ cần sử dụng dịch vụ được chia sẻ và thêm nó vào providers: [...] của thành phần gốc.

Simple lớp dịch vụ

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

Trong mẹ thêm nó vào các nhà cung cấp và tiêm nó vào constructor

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

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

Trong thành phần trẻ chỉ tiêm nó (không thêm vào các nhà cung cấp)

@Component({... 
    providers: [] 
export class Passenger { 
    constructor(private reservationService:ReservationService) { 
    console.log(reservationService.reservation); 
    } 

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

cập nhật

bootstrap() là tổ tiên chung của mọi thứ và tùy chọn hợp lệ. Nó phụ thuộc vào yêu cầu chính xác của bạn là gì. Nếu bạn cung cấp nó ở một thành phần, thì thành phần này trở thành gốc của cây chia sẻ một cá thể duy nhất. Bằng cách này bạn có thể chỉ định phạm vi của một dịch vụ. Nếu phạm vi phải là "toàn bộ ứng dụng của bạn" thì hãy cung cấp cho nó trong bootstrap() hoặc thành phần gốc. Hướng dẫn kiểu Angular2 khuyến khích ủng hộ providers của thành phần gốc trên bootstrap(). Kết quả sẽ là như nhau mặc dù. Nếu bạn chỉ muốn giao tiếp giữa một thành phần A và các thành phần khác được thêm vào <router-outlet> thì sẽ có ý nghĩa để giới hạn phạm vi cho thành phần này A.