EventEmitter ou RxJS Subject dans un service angulaire

Question

1. EventEmitter est-il un Observable RxJS ?
2. Dans la documentation angulaire, il est expliqué comment communiquer à partir de enfant au composant parent en utilisant EventEmitter. Devons-nous utiliser EventEmitter uniquement dans le composant ou peut-on utiliser le service angulaire également ?

3. Dans la documentation angulaire, il est expliqué comment le parent et les enfants communiquent via un service partagé qui utilise observables RxJS Sujet. Pouvons-nous utiliser EventEmitter au lieu de RxJS Subject dans cet exemple MissionService ? Veuillez nous aider à convertir cet exemple avec EventEmitter si nous pouvons utiliser EventEmitter dans un service. Je suis novice en angulaire.

   https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Je suis un peu confus après avoir lu ces messages connexes :

• Délégation : EventEmitter ou Observable dans Angular2
• Événements globaux dans Angular 2
• Quelle est la bonne utilisation d'un EventEmitter ?
• Service Angular 2 + RxJS BehaviorSubject ou EventEmitter
• Sujet RxJS partagé pour la liaison de données bidirectionnelle dans Angular 2

Answer 1

EventEmiter s'étend du sujet RxJs et vous pouvez l'utiliser comme Observable.

Sources angulaires

    export declare class EventEmitter<T> extends Subject<T> {
      __isAsync: boolean;
      constructor(isAsync?: boolean);
      emit(value?: T): void;
      subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
    }

La meilleure pratique pour partager des données entre les composants parent et enfant est d'utiliser @Input et @Output.

Lorsque vous avez besoin d'utiliser le service pour le partage. Vous devez utiliser Subject ou BehaviorSubject.

exemple de service

@Injectable()
export class MyService {
  private data: BehaviorSubject<MyData> = new BehaviorSubject(null);

  getData(): Observable<MyData> {
    return this.data;
  }

  setData(d: MyData): void {
    this.data.next(d);
  }
}

utilisation dans un composant

data: Observable<MyData>;

constructor(private myService: MyService) {}

ngOnInit() {
   this.data = this.myService.getData();
}

utilisation dans un modèle

<div>{{data|async}}</div>

Answer 2

Il existe de nombreuses manières différentes de gérer les scénarios d'événements.

L'EventEmitter est le moyen le plus courant de communiquer des événements enfants au parent. Supposons que vous ayez créé un composant enfant et que vous ayez cliqué sur un bouton à cet endroit, vous pourriez vouloir que l'événement cliqué soit transmis au parent :

<button (click)="clickEmitter.emit()">button</button>

<child-component (clickEmitter)="buttonClicked()"></child-component>

Un service partagé (Injectable) peut être utilisé pour stocker les données de plusieurs composants.

Un Subject et un BehaviorSubject peuvent être utilisés pour partager des événements entre les composants (parfois via le service partagé). Par exemple : j'ai utilisé un authService avec un BehaviorSubject utilisateur à l'intérieur pour obtenir l'objet utilisateur connecté dans chaque composant.

Il ne s'agit là que de simples exemples parmi de nombreux autres cas d'utilisation.