Créer EvenEmitter dynamiquement en Angular

Question

J'essaye d'implémenter le type de modèle Observer en utilisant EventEmitter dans Angular.

Par exemple, j'ai un éditeur appelé component1Publisher

component1Publisher: EventEmitter<any> = new EventEmitter(); 

publier les événements comme ci-dessous

this.component1Publisher.emit(data); 

Abonnez-vous à plusieurs composants comme ci-dessous

component1Publisher.subscribe((data:any) => { 
      //do something here; 

      }); 

Vous pouvez voir la l'éditeur est statique Dans mon projet, l'éditeur et subsciber est complètement dynamique. Donc, je veux créer cette instance de EventEmitter et abonné sur la base de mon name.Something unique composant comme ci-dessous

createEvent(uniqueName:string){ 
//new unique eventEmitter 
} 

Mon problème J'ai un cadre réutilisable pour créer un tableau de bord que l'utilisateur peut apporter des widgets fournis par le cadre lui-même. J'essaie donc de communiquer entre les widgets pour le rendre interactif. Par exemple, lorsque vous cliquez sur le widget doit notifier tous les autres widgets. Pour ce faire, je prévois de dire à l'utilisateur de fournir un service dynamique. En service dynamique, ayez une méthode comme onWidgetClick(), qui se déclenchera par framework en résolvant dynamiquement le service. Dans cette méthode, l'utilisateur peut créer un événement à publier. Il notifiera tous les widgets avec les nouvelles données et le framework le mettra à jour avec de nouvelles données (tous les widgets réutilisables ont l'abonné).

Pourriez-vous s'il vous plaît aidez-moi à ce sujet ou suggérer est-il une alternative à faire ce genre de mise en œuvre

Answer 1

Je définirais une carte (je pense que c'est le bon terme?) À l'intérieur quel que soit le composant/directive « ceci » fait référence à. Quelque chose comme:

componentPublishers: { [index:string] : EventEmitter<any> } = {}; 

ce code dit juste, je crée un objet qui contiendra eventEmitters, tous identifiés par des chaînes (vous pouvez utiliser des chaînes ou des nombres comme identifiants, mais dans presque tous les cas, les gens utiliser des chaînes).

Ensuite, vous pouvez ajouter EventEmitters avec n'importe quel nom, en utilisant la notation de parenthèse (qui est utilisée dans JS pour ajouter de nouvelles propriétés aux objets). Après sa création, vous devriez pouvoir y accéder comme d'habitude sans notation de parenthèse.En utilisant la carte comme je l'ai montré ci-dessus, les caractères dactylographiés sauront que toute propriété de l'objet componentPublishers sera un émetteur d'événement.

this.componentPublishers.myNewEventEmitter.emit('some value'); 

Remarque: vous obtenez des erreurs si vous essayez d'utiliser la notation support pour ajouter des propriétés à l'objet, si vous n'instancier premier. Je l'ai juste instancié comme un objet vide.

... = {}; 

Alors assurez-vous de le faire.

Vous pouvez aussi simplement créer un tableau d'émetteurs d'événements et y ajouter de nouveaux émetteurs, mais cela devient très maladroit car vous devez garder une trace des indices. En utilisant une carte, vous pouvez y accéder par nom comme un objet régulier, tout en conservant la vérification de type statique de Typescript.

Answer 2

Selon ce que vous essayez d'accomplir en fin de compte, cela peut ne pas être nécessaire. Vous pouvez tirer parti de la détection des modifications d'Angular pour fournir les notifications dont vous avez besoin.

Par exemple, vous pouvez configurer un service comme celui-ci:

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

@Injectable() 
export class DataService { 
    serviceData: string; 
} 

Tous les modèles liés à ces données sont automatiquement informés des modifications (pas d'événement) nécessaires.

J'ai un billet de blog à ce sujet ici: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Et plunker ici: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview