Delegación: EventEmitter u Observable en Angular

Últimas noticias: He agregado otra respuesta que usa un Observable en lugar de un EventEmitter. Recomiendo esa respuesta sobre ésta. Y en realidad, usar un EventEmitter en un servicio es una mala práctica .

Respuesta original: (no hagas esto)

Ponga el EventEmitter en un servicio, que permite al ObservingComponent suscribirse directamente (y darse de baja) al evento :

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 intentas Émbolo, hay algunas cosas que no me gustan de este enfoque:

• ObservingComponent necesita darse de baja cuando se destruye
• tenemos que pasar el componente a subscribe() para que el this adecuado se establezca cuando se llame a la devolución de llamada

Actualización: Una alternativa que resuelve la segunda viñeta es que el ObservingComponent se suscriba directamente a la propiedad navchange EventEmitter:

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

Si nos suscribimos directamente, entonces no necesitaría el método subscribe() en el NavService.

Para hacer el NavService un poco más encapsulado, podría agregar un método getNavChangeEmitter() y usar eso:

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

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

Si uno quiere seguir un estilo de programación orientado más reactivo, entonces definitivamente el concepto de "Todo es un flujo" entra en escena y, por lo tanto, use Observables para tratar con estos flujos tan a menudo como sea posible.

Puedes usar BehaviourSubject como se describió anteriormente o hay una forma más:

Puedes manejar EventEmitter así: primero agregue un selector

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)
}

}

Ahora puedes manejar este evento como supongamos observador.componente.html es la vista del componente Observer

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

Luego en el componente de observación.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);
 }

 }

Necesita usar el componente de navegación en la plantilla de ObservingComponent ( no olvide agregar un selector al componente de navegación .. componente de navegación para ex )

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

E implementar onNavGhange () en ObservingComponent

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

Última cosa .. no necesita el atributo events en @Componennt

events : ['navchange'], 

Encontré otra solución para este caso sin usar Reactivex ni servicios. Realmente me encanta la API rxjx, sin embargo, creo que funciona mejor cuando se resuelve una función asincrónica y/o compleja. Usarlo de esa manera, Es bastante superado para mí.

Lo que creo que estás buscando es una emisión. Sólo eso. Y encontré esta solución:

<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))
   }
 }

Este es un ejemplo completo de trabajo: https://plnkr.co/edit/xGVuFBOpk2GP0pRBImsE