कोणीय 2: विभिन्न मार्गों पर डेटा साझा करना

Question

मैंने SO में समान प्रश्नों की खोज की है और मुझे कोई भी ऐसा नहीं मिला है जो मेरे विशिष्ट मामले को संबोधित करता है। कोणीय घटकों के बीच डेटा साझा करने के लिए कई तकनीकें हैं, और मैंने घटक संचार के बारे में इस आलेख को पढ़ा है: https://angular.io/docs/ts/latest/cookbook/component-communication.html

हालांकि वहां वर्णित तकनीकों में से कोई भी मेरे लिए काम नहीं करता है, क्योंकि मेरे घटक विभिन्न मार्गों पर हैं। लेख ज्यादातर माता-पिता-बाल घटक संचार का वर्णन करता है, और कुछ मामलों में भाई घटकों के लिए काम किया जा सकता है जब तक कि वे दोनों एक ही समय में लोड न हों।

मेरा मामला कोणीय 2 हीरोज ट्यूटोरियल के समान है: मेरे पास एक ऐसा मार्ग है जो ग्राहकों की सूची (नायकों के बजाय) के साथ एक तालिका प्रदर्शित करता है। जब उपयोगकर्ता किसी विशिष्ट ग्राहक पर क्लिक करता है, तो मैं चयनित ग्राहक (नायक के बजाए) के डेटा के साथ एक फॉर्म प्रदर्शित करने के लिए एक रूट परिवर्तन को ट्रिगर करता हूं।

नायकों ट्यूटोरियल चयनित नायक डेटा को पुनर्प्राप्त करने के लिए एक सेवा आमंत्रण करता है, लेकिन मैं एक बेकार अतिरिक्त AJAX कॉल से बचना चाहता हूं, बशर्ते कि वह डेटा पहले से ही स्मृति में है। मैं सिर्फ चयनित ग्राहक डेटा को ग्राहक फॉर्म घटक में पास करना चाहता हूं ताकि इसे तुरंत प्रदर्शित किया जा सके।

मैं एक "वैश्विक सत्र" सेवा के बारे में सोच रहा हूं जहां मैं अपनी इच्छित वस्तु को स्टोर और पुनर्प्राप्त कर सकता हूं, लेकिन मुझे यकीन नहीं है कि यह एक अच्छा विचार है। क्या वहां कुछ और पर्याप्त दृष्टिकोण हैं?

Answer 1

उपयोग सेवा है कि मुख्य आवेदन फाइल द्वारा प्रदान की जाती है और फिर इसे इंजेक्षन जब भी आप/सेट डेटा कि

main.app.ts

@Component({ 
... 
    providers:[yourDataService] 
... 
}) 

अन्य घटकों पूरे एप्लिकेशन में उपलब्ध हो जाएगा प्राप्त करना चाहते हैं

import {yourDataService} from '...'; 

@Component({ 
... 
providers:[]// we must use provider from main file 
... 
}) 
export class someComponent{ 

    contructor(private myData:yourDataService){} 

} 

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

आप भी observables उपयोग कर सकते हैं सूचना भेजता है जब कुछ डेटा hierarchical injections या tree injector

Answer 2

में अधिक जानकारी देखने के लिए

बदल गया है क्या आपको लगता है के बारे में NgRx समाधान से प्रेरित है Redux? आप वहां और अधिक पढ़ सकते हैं - https://github.com/ngrx/store

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

Answer 3

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

एक मॉड्यूल आयात बनाएँ और मॉड्यूल

import { MyService } from './my.service’; 

@NgModule({ 
    ... 
    providers: [ 
    MyService 
    ] 
    … 
}) 

घोषणा मॉड्यूल मार्ग में सेवा का मतलब है हम तो बच्चे मार्गों के संदर्भ द्वारा सेवा पारित कर सकते हैं में सेवा घोषित।माता-पिता घटक

बच्चे मार्ग घटकों में सेवा का उपयोग न करें, सेवा

import { MyService } from '../my.service’; 

आयात प्रत्येक घटक जहां सेवा इस्तेमाल किया जाना चाहिए में, घटकों मेटाडाटा को सेवा में शामिल न करें क्योंकि हम पहले से ही मॉड्यूल परिभाषा में जोड़ा गया है। घटक निर्माता

export class MyChildRouteComponent implements OnInit { 
... 
constructor(
    private _myService: MyService, 
    private _router: Router 
) { } 
... 
} 

को सेवा जोड़ें आप तो एक बच्चे मार्ग घटक में एक सेवा गुण सेट है, तो आप एक भाई बच्चे घटक से इसे पाने के लिए सक्षम हो जाएगा।