Méthode d'appel Angular2 de l'autre composant

J'ai un Angular2 application dans laquelle j'ai créé un composant d'en-Tête, qui est rendue dans mon Application principale composante.

Maintenant, j'ai une autre Forme de composant qui doit avoir son bouton soumettre placé dans l'en-Tête. Comment pourrais-je le faire?

Je sorte de besoin de communiquer entre le bouton "soumettre" dans l'en-Tête et la méthode d'envoi du Formulaire composant. Je sais que c'est trivial à faire le parent>de l'enfant ou de l'enfant>communication avec les parents, mais dans ce cas il n'y a pas de relation parent-enfant, ni de frère, de la relation entre l'en-Tête et des composants de Formulaire.

Mon composant arbre ressemble à ceci:

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

N'quelqu'un a une idée d'une possible mise en œuvre?

source d'informationauteur ClementParis016

angular

Vous pouvez créer un service qui est partagé entre votre tête et la forme de la composante dans laquelle vous pouvez définir Observable de sorte que vous pouvez vous abonner à cette Observable de forme et d'effectuer une action lorsque vous recevez une certaine valeur de l'en-tête.

commun.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);
    }
  }
}

en-tête.composante.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'});
  }
}

forme.composante.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();
  }
}

2

En plus de la solution avec les Observables, je pense que c'est important de dire quelque chose à propos de la EventEmitters comme ils sont, à mon avis, plus facile à utiliser dans ce genre de scénarios.

Dans le contrôleur enfant

importer les EventEmitter et les types de Sortie.

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

déclarer une propriété sortie de type EventEmitter

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

rappelez-vous, pour initialiser le EventEmitter dans le constructeur comme suit:

this.formSubmit$ = new EventEmitter();

et enfin, avec une bonne action affectée au bouton d'envoi, le déclenchement de la EventEmitter "émettent" méthode de propagation de l'événement à travers votre application:

this.formSubmit$.emit(true);

Dans le Contrôleur de parent

Dans le parent de la vue, de lier la formSubmit$ de l'événement à une action du contrôleur:

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

puis de déclarer la méthode dans le Contrôleur de
```
public handleFormSubmit(submit: boolean): void {
    alert("Form has been submitted! Do your stuff here!");
}
```
Évidemment, ce genre de stratégie peut être utilisée seulement lorsque vous avez besoin d'échanger des données à partir d'un enfant à un parent contrôleur.
2

Parents et les enfants à communiquer par l'intermédiaire d'un service de

Angular2 appeler la méthode d'un autre composant
1

L'utilisation des services et des matières est le moyen le plus facile. Si vous souhaitez garder une trace de vos données, vous pouvez même utiliser la relecture sujet
```
private notify: ReplaySubject<any> = new ReplaySubject<any>();
```
Mais, vous pouvez même essayer une bibliothèque appelée comme eventbus. J'ai couru dans les mêmes problèmes et eventbus est juste la bonne réponse à cette question.

Vous devez vous connecter pour publier un commentaire.