कोणीय 2, घटकों के बीच मॉडल सिंक रखें

Question

मैं अपने विश्वसनीय रीढ़ की हड्डी से एंगुलर 2 में जाने पर विचार कर रहा हूं (या मुझे कहना चाहिए कि मेरा मालिक एक नए खिलौने के साथ खेलना चाहता है, जो मेरे द्वारा ठीक है), मैंने बहुत ऑनलाइन खोज की और कुछ परीक्षण किए लेकिन मुझे इस सरल प्रश्न का उत्तर नहीं मिल रहा है:

क्या मैं दो घटकों के बीच सिंक में 2 मॉडल रख सकता हूं? उदाहरण: मेरे पास साइडबार पर उपयोगकर्ताओं की एक सूची है, जो एक घटक है, और मेरे "मुख्य पृष्ठ" में उपयोगकर्ताओं को संपादित करने के लिए एक रूप है, जो एक और घटक है।

साइडबार अपने संग्रह को प्रदर्शित करने के लिए ज़िम्मेदार है, और फॉर्म अपने मॉडल को प्राप्त करने के लिए ज़िम्मेदार है। जब मॉडल अपडेट किया जाता है, तो मैं सर्वर से फिर से बिना, साइडबार में परिवर्तनों को प्रतिबिंबित करना चाहता हूं।

मुझे पता है स्पिनजेएस यह करता है और मैंने एक ही चीज (मॉडल क्लास और आईडी के आधार पर) प्राप्त करने के लिए घटनाओं का उपयोग करके बैकबोन में कुछ हैक किया है, लेकिन मुझे आश्चर्य है कि क्या Angular2 के पास इसे संभालने का मूल तरीका है? यदि नहीं, तो इस तरह के व्यवहार को लागू करने के साथ कोई कैसे होगा?

धन्यवाद।

संपादित करें:

मैं इस Plunker में अपने परीक्षण फ़ाइलें कहा: http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

सबसे पहले, एक नायक का चयन करें, और "विवरण देखें" पर क्लिक करें, यह करने के लिए स्मृति सर्वर से एक http.get के अनुरोध करेगा हीरो प्राप्त करें।

दूसरा, "तलवार दें" पर क्लिक करें, यह चयनित उपयोगकर्ता को एक हथियार जोड़ देगा। परीक्षण उद्देश्यों के लिए, पहले से लोड किए गए उपयोगकर्ता का उपयोग करने के बजाय, मैं उसी अनुरोध का अनुरोध करता हूं कि http.get फिर से उपयोग करें।

जब मैं टेक्स्टबॉक्स में नाम बदलता हूं, तो दूसरा उदाहरण का नाम अपडेट नहीं होता है।

आपको कल्पना करना है कि मैं किसी भी कारण से नायक के वर्तमान उदाहरण का उपयोग नहीं कर सकता, मैं सर्वर से फिर से अनुरोध करना चाहता हूं।

Answer 1

मुझे लगता है कि ऐसा करने का सबसे अच्छा तरीका साझा सेवा में EventEmitter का लाभ उठाना है। जब कोई परिवर्तन किया जाता है, तो ईवेंट एमिटर पर एक ईवेंट उत्सर्जित होता है। इसके खिलाफ पंजीकृत आवेदन के अन्य हिस्सों को अधिसूचित किया जाएगा।

• Delegation: EventEmitter or Observable in Angular2

Answer 2

आप घटकों के बीच एक सेवा साझा कर सकते हैं:

इस उत्तर देखें।

@Injectable() 
export class SharedService { 
    someField:string; 
} 

@Component({selector: 'parent-cmp', providers [SharedService], ...) 
export class ParentCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

@Component({selector: 'child-cmp', 
    // don't add it to providers here so it gets the same instance 
    // the parent got 
    /*providers [SharedService] */, ...) 
export class ChildCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

जब कोई घटक सेवा में एक फ़ील्ड बदलता है, तो दूसरी सेवा वे अन्य घटक में भी दिखाई दे रही हैं।

आप परिवर्तनों या अन्य घटनाओं के बारे में इच्छुक पार्टियों को सूचित करने के लिए Observable या EventEmitter का उपयोग कर सकते हैं।

Answer 3

आप एक ही घटक के लिए एक अलग घटक में सदस्यता लेने के लिए साझा सेवाओं का उपयोग कर सकते हैं। (यदि आप बूटस्ट्रैप पर यह सेवा प्रदान करते हैं, तो यह आपको सभी घटकों में एक ही वस्तु देगा। बहुत महत्वपूर्ण!)।

आप http.get केवल एक बार फोन करने के लिए, और उसके बाद सिर्फ इतना है कि कॉल को पुनः चलाने चाहते हैं, आप का उपयोग करना चाहिए:

private _subject = new ReplaySubject(1); 
constructor(public http: Http) { 
    this.http 
     .get("...").subscribe(this._subject); 
} 

पूर्ण, काम उदाहरण: https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

नेटवर्क पर एक नजर डालें पैनल (क्रोम), AJAX कॉल केवल एक बार निकाल दिया जाता है।