अन्य घटक की कोणीय 2 कॉल विधि

Question

मेरे पास एक कोणीय 2 ऐप है जिसमें मैंने एक शीर्षलेख घटक बनाया है, जो कि मेरे मुख्य ऐप घटक में प्रस्तुत किया गया है।

अब, मेरे पास एक अन्य फॉर्म घटक है जिसमें हेडर में सबमिट बटन होना चाहिए। ऐसा कैसे किया जा सकता था?

मुझे हेडर में सबमिट बटन और फॉर्म घटक की सबमिट विधि के बीच संवाद करने की आवश्यकता है। मुझे पता है कि माता-पिता> बच्चे या बच्चे> माता-पिता के संचार के लिए यह छोटा है, लेकिन इस मामले में मेरे हेडर और फॉर्म घटकों के बीच कोई अभिभावक-बाल संबंध नहीं है और न ही रिश्तेदार संबंध हैं।

मेरे घटक पेड़ इस तरह दिखता है:

- app-root 
    |-- app-header // -> this is where the submit button is 
    |-- app-edit-profile 
     |-- app-profile-form // -> this is my form 

किसी एक संभव कार्यान्वयन के किसी भी विचार है?

Answer 1

आप एक सेवा बना सकते हैं जो आपके हेडर और फॉर्म घटक के बीच साझा की जाती है जिसमें आप Observable को परिभाषित कर सकते हैं ताकि आप फॉर्म से Observable पर सब्सक्राइब कर सकें और जब आप हेडर से कुछ मान प्राप्त करते हैं तो कुछ क्रियाएं कर सकते हैं।

common.service.ts

import { Injectable, Inject } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class CommonService { 
    private notify = new Subject<any>(); 
    /** 
    * Observable string streams 
    */ 
    notifyObservable$ = this.notify.asObservable(); 

    constructor(){} 

    public notifyOther(data: any) { 
    if (data) { 
     this.notify.next(data); 
    } 
    } 
} 

header.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { CommonService } from './common.service'; 

@Component({ 
    selector : 'header', 
    templateUrl : './header.html' 
}) 
export class HeaderComponent implements OnInit, OnDestroy { 
    constructor(private commonService: CommonService){ 
    } 

    ngOnInit() {  
    } 

    onSubmit(){ 
    // this method needs to be called when user click on submit button from header 
    this.commonService.notifyOther({option: 'onSubmit', value: 'From header'}); 
    } 
} 

form.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { CommonService } from './common.service'; 

@Component({ 
    selector : 'form', 
    templateUrl : './form.html' 
}) 
export class FormComponent implements OnInit, OnDestroy { 
    private subscription: Subscription; 
    constructor(private commonService: CommonService){ 
    } 

    ngOnInit() { 
    this.subscription = this.commonService.notifyObservable$.subscribe((res) => { 
     if (res.hasOwnProperty('option') && res.option === 'onSubmit') { 
     console.log(res.value); 
     // perform your other action from here 

     } 
    }); 
    } 

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

Answer 2

इसके अलावा अवलोकन के साथ समाधान के लिए, मुझे लगता है कि EventEmitters के बारे में कुछ कहना महत्वपूर्ण है, क्योंकि मेरी राय में, इस तरह के परिदृश्यों में उपयोग करना आसान है।

बच्चे नियंत्रक

आयात EventEmitter और आउटपुट प्रकार में।

import { EventEmitter, Output } from "@angular/core

प्रकार का उत्पादन संपत्ति घोषित EventEmitter

@Output() formSubmit$: EventEmitter<boolean>;

इस प्रकार निर्माता में EventEmitter आरंभ करने के लिए याद रखें:

this.formSubmit$ = new EventEmitter();

और अंत में, एक साथ उचित कार्रवाई सबमिट बटन पर बाध्य , EventEmitter विधि अपने अनुप्रयोग भर में घटना का प्रचार करने को गति प्रदान "फेंकना":

this.formSubmit$.emit(true);

माता पिता नियंत्रक

माता पिता के ध्यान में रखते हुए में, की एक कार्रवाई करने के लिए formSubmit $ घटना बाँध नियंत्रक:

<child-selector (formSubmit$)="handleFormSubmit($event)"></child-selector>

तो नियंत्रक में प्रणाली की घोषणा

public handleFormSubmit(submit: boolean): void { 
    alert("Form has been submitted! Do your stuff here!"); 
} 

जाहिर है, इस तरह की रणनीति केवल जब आप एक माता पिता के नियंत्रक से एक बच्चे से डेटा का आदान प्रदान करने की जरूरत है इस्तेमाल किया जा सकता।

Answer 3

जनक और बच्चों के लिए एक सेवा

Angular2 call method of other component

Answer 4

सेवाओं और विषयों के उपयोग के लिए सबसे आसान तरीका है के माध्यम से संवाद। आप अपने डेटा का एक रिकॉर्ड रखना चाहते हैं, तो आप भी पुनरावृत्ति विषय का उपयोग कर सकते

private notify: ReplaySubject<any> = new ReplaySubject<any>(); 

लेकिन, आप भी एक पुस्तकालय eventbus के रूप में बुलाया आज़मा सकते हैं। मैं एक ही मुद्दे में भाग गया हूं और इवेंटबस सिर्फ इसके लिए सही जवाब है।