कोणीय में घटक के बीच संवाद कैसे करें?

Question

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

Answer 1

आपको निर्भरता इंजेक्शन का उपयोग करने की आवश्यकता होगी। यहाँ एक छोटा सा उदाहरण है: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Answer 2

1. @Input और @Output

   अगर वहाँ बहुखण्डीय घटकों आप डेटा विनिमय करने के @Input और @Output का उपयोग कर सकते हैं। दस्तावेज़: https://angular.io/guide/component-interaction

   उदाहरण: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

2. निर्भरता इंजेक्शन

   आप सेवा में डेटा स्टोर कर सकते हैं, और फिर घटक है जो आप चाहते हैं में सेवा इंजेक्षन। इस तरह के "user.server.ts" उदाहरण में है:

   https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Answer 3

आप एक बच्चे घटक के एक माता पिता के घटक से संवाद करने के लिए कोशिश कर रहे हैं, यह बहुत स्पष्ट रूप से @Input और EventEmitters का उपयोग कर वर्णन किया गया है कोणीय दस्तावेज़ों में @ आउटपुट के साथ।

Angular 2 component interaction

भाई बहन भर में संचार के लिए के रूप में, मैं एक ऐसी ही सवाल है कि भाई घटकों भर में डेटा साझा करने के मुद्दे के साथ मदद कर सकता है में एक उत्तर पोस्ट किया। वर्तमान में, मुझे लगता है कि साझा सेवा विधि सबसे कुशल है।

angular-2-sibling-component-communication

Answer 4

एक सेवा का उपयोग करना:

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AppState { 
    public _subject = new Subject<object>(); 
    public event = this._subject.asObservable(); 

    public publish(data: any) { 
    this._subject.next(data); 
    } 
} 

और आप इस तरह की घटना की तरह सन्देश को प्रकाशित कर सकते हैं:

export class AppComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.publish({data: 'some data'}); 
    } 
} 

और आप इन घटनाओं की सदस्यता ले सकते:

export class HomeComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.event.subscribe((data) => { 
     console.log(data); // {data: 'some data'} 
    }); 
    } 
} 

Answer 5

घटनाक्रम एपीआई कोणीय में जो आपके लिए यह कर सकता है।

Click here for more details on Events.

नीचे एक त्वरित उदाहरण मैं इस समय अपने प्रोजेक्ट में उपयोग कर रहा हूँ है। उम्मीद है कि यह किसी की जरूरत में मदद करता है।

'आयनिक-कोणीय' से आयात {घटनाक्रम};

उपयोग:

constructor(public events: Events) { 
     /*========================================================= 
     = Keep this block in any component you want to receive event response to   = 
     ==========================================================*/ 
     // Event Handlers 
     events.subscribe('menu:opened',() => { 
      // your action here 
      console.log('menu:opened'); 
     }); 
     events.subscribe('menu:closed',() => { 
      // your action here 
      console.log('menu:closed'); 
     }); 
    } 

    /*===================================================== 
    = Call these on respective events - I used them for Menu open/Close   = 
    ======================================================*/ 

    menuClosed() { 
     // Event Invoke 
     this.events.publish('menu:closed', ''); 
    } 
    menuOpened() { 
     // Event Invoke 
     this.events.publish('menu:opened', ''); 
    } 

    }