रूट पैराम के माध्यम से कोणीय 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(); 

} 

} 

इस घटक एपीआई से एक बुकिंग पुनर्प्राप्त और आरक्षण वस्तु जैसा कि आप देख में सहेजें (यह आरक्षण का एक प्रकार है जो एक वर्ग है है इस तरह दिखता है)

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> 

) { } 
} 

जब मैं बटन यात्री क्लिक करें, यह यात्री पेज मुख्य/यात्री पर रीडायरेक्ट करेगा, लेकिन यहाँ मैं आरक्षण वस्तु (पूरे एक) या सिर्फ PassengerList भेजने के लिए (सरणी की जरूरत है)।

क्या कोई पता है कि मार्ग पैरा के साथ या राउटर-आउटलेट के साथ ऐसा करना संभव है? कोई सुझाव?

Answer 1

बस एक साझा सेवा का उपयोग और माता पिता के घटक के providers: [...] में जोड़ें।

सरल सेवा वर्ग

@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() सबकुछ का सामान्य पूर्वज और वैध विकल्प है। यह इस बात पर निर्भर करता है कि आपकी सटीक आवश्यकताएं क्या हैं। यदि आप इसे किसी घटक पर प्रदान करते हैं, तो यह घटक पेड़ की जड़ बन जाता है जो एक उदाहरण साझा करता है। इस तरह आप एक सेवा का दायरा निर्दिष्ट कर सकते हैं। यदि दायरा "आपका पूरा आवेदन" होना चाहिए तो इसे bootstrap() या रूट घटक में प्रदान करें। Angular2 शैली मार्गदर्शिका bootstrap() पर रूट घटक के providers का पक्ष लेने के लिए प्रोत्साहित करती है। परिणाम हालांकि वही होगा। यदि आप केवल A और अन्य घटकों के बीच संवाद करना चाहते हैं जो <router-outlet> में जोड़े गए हैं तो यह इस घटक A पर दायरे को सीमित करने का अर्थ होगा।