Délégation: EventEmitter ou Observable en angle

Breaking news: j'ai ajouté autre réponse qui utilise un Observables plutôt que d'une EventEmitter. Je recommande cette réponse plutôt que celle-ci. Et en fait, utiliser un EventEmitter dans un service est mauvaise pratique .

réponse Originale à cette question: (ne pas faire)

mettre L'EventEmitter en service, ce qui permet à la ObservingComponent de s'abonner directement (et de se désinscrire) à l'événement :

import {EventEmitter} from 'angular2/core';

export class NavService {
  navchange: EventEmitter<number> = new EventEmitter();
  constructor() {}
  emit(number) {
    this.navchange.emit(number);
  }
  subscribe(component, callback) {
    // set 'this' to component when callback is called
    return this.navchange.subscribe(data => call.callback(component, data));
  }
}

@Component({
  selector: 'obs-comp',
  template: 'obs component, index: {{index}}'
})
export class ObservingComponent {
  item: number;
  subscription: any;
  constructor(private navService:NavService) {
   this.subscription = this.navService.subscribe(this, this.selectedNavItem);
  }
  selectedNavItem(item: number) {
    console.log('item index changed!', item);
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-nav',
  template:`
    <div class="nav-item" (click)="selectedNavItem(1)">item 1 (click me)</div>
  `,
})
export class Navigation {
  constructor(private navService:NavService) {}
  selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navService.emit(item);
  }
}

si vous essayez le Plunker , il y a quelques choses que je n'aime pas dans cette approche:

• ObservingComponent besoin de se désabonner quand il est détruit
• nous devons passer le composant à subscribe() de sorte que le this approprié est mis lorsque le le rappel s'appelle

mise à Jour: Une alternative qui permet de résoudre le 2e point est d'avoir le ObservingComponent s'abonner directement à la navchange EventEmitter la propriété:

constructor(private navService:NavService) {
   this.subscription = this.navService.navchange.subscribe(data =>
     this.selectedNavItem(data));
}

si nous nous abonnons directement, nous n'aurions pas besoin de la méthode subscribe() sur le NavService.

pour rendre le NavService un peu plus encapsulé, vous pouvez ajouter une méthode getNavChangeEmitter() et utiliser que:

getNavChangeEmitter() { return this.navchange; }  // in NavService

constructor(private navService:NavService) {  // in ObservingComponent
   this.subscription = this.navService.getNavChangeEmitter().subscribe(data =>
     this.selectedNavItem(data));
}

si l'on veut suivre un style de programmation plus réactif, alors certainement le concept de" tout est un flux " entre en scène et, par conséquent, utiliser des Observables pour traiter ces flux aussi souvent que possible.

vous pouvez utiliser BehaviourSubject comme décrit ci-dessus ou il y a une autre façon:

vous pouvez gérer EventEmitter comme ça: ajouter d'abord un sélecteur

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
// other properties left out for brevity
selector: 'app-nav-component', //declaring selector
template:`
  <div class="nav-item" (click)="selectedNavItem(1)"></div>
`
 })

 export class Navigation {

@Output() navchange: EventEmitter<number> = new EventEmitter();

selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navchange.emit(item)
}

}

Maintenant vous pouvez gérer cet événement comme supposons observateur.composant.html est le point de vue de l'Observateur de la composante

<app-nav-component (navchange)="recieveIdFromNav($event)"></app-nav-component>

puis dans le ObservingComponent.ts

export class ObservingComponent {

 //method to recieve the value from nav component

 public recieveIdFromNav(id: number) {
   console.log('here is the id sent from nav component ', id);
 }

 }

vous devez utiliser le composant de Navigation dans le modèle de ObservingComponent ( n'oubliez pas d'ajouter un sélecteur au composant de Navigation .. navigation-composante ex )

<navigation-component (navchange)='onNavGhange($event)'></navigation-component>

Et de mettre en œuvre onNavGhange() dans ObservingComponent

onNavGhange(event) {
  console.log(event);
}

dernière chose .. vous n'avez pas besoin de l'attribut events dans @Componennt

events : ['navchange'], 

j'ai trouvé une autre solution pour ce cas sans utiliser les services de Réactivex. En fait, j'adore L'API rxjx, mais je pense qu'elle va le mieux dans la résolution d'une fonction asynchrone et/ou complexe. L'utiliser de cette façon, c'est assez dépassé pour moi.

ce que je pense que vous cherchez, c'est une émission. Juste que. Et j'ai trouvé cette solution:

<app>
  <app-nav (selectedTab)="onSelectedTab($event)"></app-nav>
       // This component bellow wants to know when a tab is selected
       // broadcast here is a property of app component
  <app-interested [broadcast]="broadcast"></app-interested>
</app>

 @Component class App {
   broadcast: EventEmitter<tab>;

   constructor() {
     this.broadcast = new EventEmitter<tab>();
   }

   onSelectedTab(tab) {
     this.broadcast.emit(tab)
   }    
 }

 @Component class AppInterestedComponent implements OnInit {
   broadcast: EventEmitter<Tab>();

   doSomethingWhenTab(tab){ 
      ...
    }     

   ngOnInit() {
     this.broadcast.subscribe((tab) => this.doSomethingWhenTab(tab))
   }
 }

ceci est un exemple de travail complet: https://plnkr.co/edit/xGVuFBOpk2GP0pRBImsE