कोणीय 2 पैरेंट घटक से रूटर आउटलेट

Question

सभी ट्यूटोरियल और उत्तर जो मैंने पाया है, केवल इनपुट घटक का उपयोग करके मूल घटक से एक घटक को पास करने के तरीके को दिखाता है लेकिन राउटर के भीतर यह बच्चा घटक क्या है आउटलेट और सीधे माता-पिता टेम्पलेट में नहीं ??

जैसे:

मुख्य घटक

@Component({ 
    selector: 'my-app', 
    template: ` 
      Main page 
      <router-outlet></router-outlet> 
       `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent}, 
]) 

export class AppComponent{ 
    public num:Number = 123; 
} 





@Component({ 
    selector: 'contact-page', 
    template: 'contact page' 
}) 
export class ContactComponent{ 
    public num:Number; 
} 

तो इस उदाहरण में मुख्य घटक टेम्पलेट एक रूटर आउटलेट जहां बच्चे संपर्क घटक रेंडर किया जाएगा शामिल लेकिन मैं कैसे चर प्राप्त कर सकते हैं "संख्या" अभिभावक ऐप घटक से राउटर आउटलेट के अंदर मूल्यांकन किए गए बाल घटक में मूल्य ??

Answer 1

वर्तमान में आप राउटर द्वारा जोड़े गए घटकों से बंधे नहीं जा सकते हैं। इसके बजाए या जोड़े गए घटक से या घटनाओं की सदस्यता लेने के लिए इसके बजाय एक साझा सेवा का उपयोग करें (एसओ पर पहले से कई उदाहरण हैं)।

भी देखें इस मुद्दे https://github.com/angular/angular/issues/4452 विशेष रूप से इस टिप्पणी https://github.com/angular/angular/issues/4452#issuecomment-153889558

Answer 2

अपने डेटा अपरिवर्तनीय है, तो आप RouteData उपयोग कर सकते हैं।

@Component({...}) 
@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent, data: {num: 123}}, 
]) 
export class AppComponent { 
} 

@Component({...}) 
export class ContactComponent { 
    public num:Number; 
    constructor(data: RouteData) { 
    this.num = data.get('num'); 
    } 
} 

कुछ कॉन्फ़िगरेशन विकल्पों को पारित करने के लिए उपयोगी हो सकता है जिन्हें आप बाल मार्गों में हार्डकोड नहीं करना चाहते हैं। लेकिन यदि आप डेटा को बदलने की उम्मीद कर रहे हैं, तो आपको कुछ अन्य विधि की आवश्यकता होगी।

Answer 3

मैंने अभी इस सवाल पर ठोकर खाई है, यहां बताया गया है कि मैंने इसी तरह के मुद्दों को हल किया है।

मैं इसे हल करने के लिए एक सेवा का उपयोग करूंगा। फिर सभी बच्चों और माता-पिता के लिए संपत्ति निर्धारित करना संभव है, और सभी ग्राहकों के लिए परिवर्तन प्रचारित किए जाते हैं। सबसे पहले मैं एक निजी BehaviorSubject जो एक सार्वजनिक गेटर और सेटर है के साथ एक सेवा बनाना होगा, ReplaySubject संपुटित के लिए और केवल प्रत्यक्ष वापसी:

private _property$: BehaviorSubject<number> = new BehaviorSubject(1); 

set property(value: number) { 
    this._property$.next(value); 
} 

get property$(): Observable<number> { 
    return this._property$.asObservable(); 
} 

नई BehaviorSubject उपयोग करने का कारण (1), करने के लिए प्रारंभिक मूल्य निर्धारित करने के लिए है 1, तो सदस्यता लेने के लिए कुछ है।

माता-पिता में onInit, मैं करूंगा डिफ़ॉल्ट संपत्ति के मूल्य (संख्या) से:

private _propertySubscribtion: Subscription 

ngOnInit() { 
    // set default value to 5 
    this._componentService.property = 5; 

    // If property is updated outside parent 
    this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

एक में या बच्चे घटकों के के और अधिक, यह संभव परिवर्तन के लिए सदस्यता के लिए:

private _propertySubscribtion: Subscription 

ngOnInit() { 
    this._propertySubscribtion = this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

और अगर कुछ बच्चे या माता पिता संपत्ति अद्यतन करता है:

updateProperty() { 
    // update property 
    this._componentService.property = 8; 
} 

सभी ग्राहकों को इसके बारे में पता चल जाएगा।