Angulaire 2 EventEmitter de Radiodiffusion suivant( ... ) d'une fonction de Service

À ma connaissance, le .toRx().abonnez-vous( ... ) la fonction est destinée à RECEVOIR des messages et la .fonction next() est destiné à la DIFFUSION des messages de

Dans ce plnkr ( http://plnkr.co/edit/MT3xOB?p=info ) , vous appelez l' .toRx().abonnez-vous( ... ) la fonction à partir d'un objet de données qui semble être défini/dérivé à l'origine du modèle:

@Component({
  selector : 'child-cmp',
  template : '',
  inputs : ['data']
})
class ChildCmp {
  afterViewInit() {
    this.data.toRx().subscribe((data) => {
      console.log('New data has arrived!', data);
    });
  }
}

Dans ce plnkr ( http://plnkr.co/edit/rNdInA?p=preview ) , vous appelez l' .toRx().abonnez-vous( ... ) la fonction à partir d'un evt l'objet et de son émetteur de fonction (en provenance du Service injecté dans le composant du constructeur)

@Component({
  selector : 'parent-cmp',
  template : ''
})
class ParentCmp {
  constructor(evt: EventService) {
    evt.emitter.subscribe((data) => 
      console.log("I'm the parent cmp and I got this data", data));
  }
}

Est possible pour la DIFFUSION de prendre place dans une fonction de Service elle-même alors que dans le même temps, est-il possible pour le Composant de RECEVOIR le message sans compter sur un retour de Service de l'objet ou de Modèle d'objet de données de la chaîne de son .toRX().abonnez-vous( ... ) la fonction invokation?

import {Injectable, EventEmitter} from 'angular2/angular2';
@Injectable()
export class DataService {
    items:Array<any>;
    dispatcher: EventEmitter = new EventEmitter();
    constructor() {
        this.items = [
            { name: 'AAAA' },
            { name: 'BBBB' },
            { name: 'CCCC' }
        ];
    }
    getItems() {
        return this.items;
    }
    sendItems() {
        this.dispatcher.next( this.items );
    } 
}
export var DATA_BINDINGS: Array<any> = [
    DataService
];


@Component({
    selector: 'rabble'
})
@View({
    ...
})
export class Rabble {

    items       : Array<any>;

    constructor( public dataService  : DataService) { 

        console.log('this.routeParam', this.dataService.getItems());
    }

    afterViewInit() {
        this.???.toRx().subscribe((data) => {
            console.log('New item data has arrived!', data);
        });
    }

    handleClick() {
        this.dataService.sendItems();
    }
}

OriginalL'auteur Benjamin McFerren | 2015-11-04

11

En version 2.0 Stable: EventEmitter est maintenant uniquement pour les composants de communication. C'est une meilleure utilisation pour les Sujets et les ReplaySubjects. J'ai mis à jour les exemples de 2.0 code.

~~mise à JOUR DE la BÊTA 1: Vous n'avez plus besoin d'appeler .toRx() sur l'émetteur, donc je suis à jour le code de match et ajout d'un exemple pour vous désabonner.~~

Donc, pour l'instant (Alpha 45) La eventEmitter a que toRx() méthode qui renvoie une RxJS SUJET

Vous pouvez google un peu ce que c'est et ce que vous pouvez faire avec elle, mais c'est ce que vous êtes réellement jouer avec. Lorsque vous appelez toRx (), elle renvoie simplement à l'intérieur de la eventEmitter de sorte que vous pouvez le faire à votre service constructeur.

Puis j'ai ajouté la fonction que tu voulais faire de la diffusion de l'événement de service
```
class EventService {
  //could be regular Subject but I like how ReplaySubject will send the last item when a new subscriber joins
  emitter: ReplaySubject<any> = new ReplaySubject(1);
  constructor() {

  }
  doSomething(data){
    this.emitter.next(data);
  }
}
```
Ensuite dans votre composant de vous abonner à l'émetteur
```
class ParentCmp {
  myData: any;
  constructor(private evt: EventService) {
    //rx emitter
    this.evt.emitter.subscribe((data) => {
      this.myData = data;
      console.log("I'm the parent cmp and I got this data", data));
    }
  }
}
```
Et voici une étendue de classe avec un construit dans de désabonnement(défaire)
```
export class ParentCmp implements OnDestroy {
  myData: any;
  subscription: any;
  constructor(evt: EventService) {
    //rx emitter
    this.subscription = evt.emitter.subscribe((data) => {
      this.myData = data;
      console.log("I'm the parent cmp and I got this data", data));
    }
  }
  ngOnDestroy() {
    this.subscription.dispose();
  }
}
```
Je suis un peu confus au sujet de votre dernière question, mais pensez à l'expression "recevoir un message." Vous devez être écoute à quelque chose si c'est ce que la méthode subscribe ne et est nécessaire.

Truc Cool, c'est maintenant, vous pouvez appeler que les observables partout (même dans les autres services) et de l'OMI est le meilleur moyen de communiquer entre les composants. Ils n'ont pas besoin de connaître leur position dans l'arbre ou de soins, ou si les autres composants existent ou sont à l'écoute.

Je Bifurquais votre Plunker avec ma façon de travailler ICI
(toujours sur Alpha45)

RxJs source et info sur le sujet

Angular2 source et info sur le sujet à l'intérieur de la eventEmitter

Thnx Dennis. Im toujours curieux de connaître certains liés / persistante de la fonctionnalité. Quelle est la bonne EventEmitter syntaxe utilisée pour vous abonner à un "canal" comme nous l'avons fait dans angulaire de 1 $de Diffusion et de $? Afin de parvenir à un "canal", je viens de créer un deuxième EventEmitter variable ou juste une nouvelle/2e fermeture de la variable liée à l'existant _emitter variable? ... = ce._emitter.toRx(); $scope.$diffusion('myCustomEvent', { someProp: 'vous Envoyer un Objet!' // envoyer tout ce que vous voulez }); $scope.$('myCustomEvent', function (event, data) { console.log(data); // 'envoyer' });
Pour être honnête, dans mon utilise je saute le EventEmitter et aller directement à la création d'un nouveau observable(l'ensemble .toRx() chose à l'heure actuelle est une douleur), puis le mettre dans un objet. Je me sens comme le EventEmitter est plus adapté à la communication dans les composants Vs un service.(OMI) que Vous souhaitez en créer une nouvelle par "canal", sinon vous auriez besoin logique de filtrage à chaque fois que le flux de mise à jour. Je viens d'appeler: myObserverService.observers.myCustomEvent.subscribe(...) OU vous pourriez faire un helper dans votre service, et avoir quelque chose comme: myObserverService.listen('myCustomEvent',(data)=>{},(error)=>{})
Je pensais à ce sujet sur le week-end et je l'ai raté un gros point de ce que tu voulais. Vous devez pour assurer l'utilisation la EventEmitter pour la pub/sub nature de votre plan. De cette façon, vous pouvez facilement le faire .next() à partir d'autres fonctions.
C'est une bonne solution, mais vous oubliez de vous désinscrire les gestionnaires d'événements. Si vous n'avez pas à vous désabonner, le gestionnaire sera appelé plusieurs fois si vous avez plusieurs instances de ce composant. - Je trouver un "unsubscribe" méthode, mais il ne fonctionne pas comme prévu
C'est seulement si vous voulez qu'une seule réponse, si c'est le cas, vous pouvez appeler complète() à l'intérieur de l'appelant. De l'extérieur il ressemble, vous pouvez utiliser dispose() (RxJS sujet), mais je n'ai jamais testé...

OriginalL'auteur Dennis Smolek

En version Beta, vous n'avez plus besoin de les convertir à RxJs objet par toRx().

var evtEmitter = new EventEmitter();

evtEmitter.emit(args);
evtEmitter.subscribe((args)=>{console.log('new event')});

OriginalL'auteur tom10271

Vous devez vous connecter pour publier un commentaire.