कोणीय 2 - घटकों के बीच डेटा/परिवर्तन कैसे साझा करें

Question

तो मान लें कि आपके पास एक इंटरफ़ेस है जिसमें टूलबार, साइडबार और ग्रिड है। टूलबार में एक ड्रॉप-डाउन होता है जब कोई उपयोगकर्ता बदलता है, साइडबार और ग्रिड में सामग्री बदल जाती है। कोणीय 1 में वापस, मैं अपने सभी गतिशील डेटा रखने के लिए एक सेवा का उपयोग करता हूं। जब सेवा में कुछ बदलाव होता है, तो उस सेवा का उपयोग करने वाले सभी घटक भी अपडेट होंगे।

अच्छी तरह से कोणीय 2 में, ऐसा लगता है कि लोग विभिन्न तरीकों का उपयोग कर रहे हैं। मैं आपका इनपुट प्राप्त करना चाहता था जिस पर पसंदीदा तरीका है।

• स्टेटिक सेवा
• OnChanges
• इनपुट और आउटपुट

---

अपडेट किया गया - 03/09/16

सबसे अच्छा समाधान की तरह लग रहा थ्रेड है थियरी टेम्पलर पोस्ट किया गया: Delegation: EventEmitter or Observable in Angular2

मेरे पास शेष प्रश्न यह है कि यदि घटक के बीच साझा की जाने वाली प्रत्येक डेटा आइटम के लिए नई सेवा बनाने का सर्वोत्तम अभ्यास है या क्या हमारे पास केवल एक ऐसी सेवा है जिसमें सभी साझा डेटा संग्रहीत हो।

See Plnkr for code 

Original Plunker - केवल एक सेवा है जो वस्तु में सभी डेटा संग्रहीत करता है - हर परिवर्तन से उसकी अपनी सेवा

Revised Plunker for example होगा। प्रत्येक श्रोता को यह जांचने के लिए एक प्रकार दिया जाएगा कि उसे उस प्रकार के आधार पर कुछ भी करने की आवश्यकता है या नहीं।

Answer 1

आप इस के लिए साझा सेवा का लाभ उठाने सकता है। डेटा अपडेट होने पर अधिसूचित होने के लिए सदस्यता लेने के लिए डेटा और अवलोकन दोनों हो सकते हैं।

• सेवा

  export class ListService { 
      list1Event: EventEmitter<any> = new EventEmitter(); 
  
      getLists() { 
      return this.http.get(url).map(res => res.json()) 
       .subscribe(
       (data) => { 
        this.list1Event.emit(data.list1); 
       } 
      ); 
      } 
  } 
  

• घटक

  @Component({ 
      selector: 'my-component1', 
      template: ` 
      <ul> 
      <li *ngFor="#item of list">{{item.name}}</li> 
      </ul> 
      ` 
  }) 
  export class MyComponent1 { 
      constructor(private service:ListService) { 
      this.service.list1Event.subscribe(data => { 
       this.list = data; 
      }); 
      } 
  } 
  

• बूटस्ट्रैप

  bootstrap(AppComponent, [ ListService ]); 
  

अधिक जानकारी के लिए इस सवाल का देखें:

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2
• Is possible to have two template for single call service in AngularJS 2

Answer 2

आपके उपयोग के मामले में मैं सेवाओं का उपयोग करूंगा। सेवाओं का उपयोग अन्य घटकों को अपने डेटा को संवाद करने के लिए किया जाता है। एक घटक सेवा को इस डेटा को अपडेट कर सकता है, और दूसरा घटक इससे पढ़ सकता है। या दोनों घटक सिर्फ इससे पढ़ सकते हैं, और सर्वर को स्वयं को 'बाहरी दुनिया' से डेटा प्राप्त हो जाता है।

आप माता-पिता से बच्चे को डेटा के साथ पास करने के लिए input का उपयोग करते हैं और आप बच्चे से माता-पिता को आउटपुट ईवेंट के लिए output का उपयोग करते हैं।

आप ngOnChanges का उपयोग कुछ करने के लिए जब कुछ घटक अपने आप में बदलता है, लेकिन मुझे लगता है कि के लिए get() और set() कार्यों का उपयोग करने के लिए पसंद करते हैं।

कम से कम, कि मेरी ले है पर यह :)