Açısal 2 geçiş nesnesi, rota paramları ile mümkün mü?

Question

Bu sorunu nasıl çözeceğime dair bazı tavsiyelerde bulunabilirim. senin için bir ana bileşeni oluşturduk bu mümkün olan en iyi açıklamak için:

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

} 

} 

Bu bileşen API gelen rezervasyon Retreive ve gördüğünüz rezervasyon nesne kaydetmek (Bir sınıf Rezervasyon türü vardır Ben düğme yolcu tıkladığınızda, O yolcu sayfa Ana/yolcu yönlendirilecek

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> 

) { } 
} 

) şöyle, ama burada (rezervasyon nesnesi (bütün bir) ya da sadece YolcuListesi göndermek için diziyi gerek).

Bunu, rota paramları veya yönlendirici çıkışı ile yapmanın mümkün olup olmadığını biliyor musunuz? Baska öneri?

Answer 1

Sadece paylaşılan bir hizmet kullanın ve ana bileşenin providers: [...] numarasına ekleyin.

Basit hizmet sınıfı ebeveyn olarak

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

sağlayıcıları eklemek ve sadece (sağlayıcılarına katmayan) enjekte çocuk bileşeninde yapıcısı

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

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

içinde enjekte

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

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

güncelleme

bootstrap(), her şeyin ve geçerli bir seçeneğin ortak atasıdır. Tam gereksinimlerinize göre değişir. Bir bileşende sağlarsanız, bu bileşen, tek bir örneği paylaşan ağacın kökü haline gelir. Bu şekilde bir servisin kapsamını belirtebilirsiniz. Kapsam "uygulamanızın tamamı" olmalıysa, bootstrap() veya kök bileşenini sağlayın. Angular2 stil kılavuzu, bootstrap() üzerinde kök bileşeninin providers lehine teşvik eder. Sonuç yine de aynı olacaktır. A bileşeni ile <router-outlet> ürününe eklenen diğer bileşenler arasında iletişim kurmak istiyorsanız, bu bileşenin kapsamını A ile sınırlamak mantıklı olacaktır.