Делегирование: EventEmitter или наблюдаемый в угловом

последние новости: я добавил еще один ответ который использует наблюдаемый, а не EventEmitter. Я рекомендую этот ответ над этим. И на самом деле, использование EventEmitter в сервисе-это плохая практика.

---

оригинальный ответ: (не делайте этого)

поместите EventEmitter в службу, которая позволяет ObservingComponent напрямую подписаться (и отписаться) на событие:

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

если вы попытаетесь Plunker, есть несколько вещей, которые мне не нравятся в этом подходе:

• ObservingComponent должен отписаться, когда он будет уничтожен
• мы должны передать компонент в subscribe() Так что правильная this устанавливается при вызове обратного вызова

Update: альтернативой, которая решает 2-й пуля, является непосредственное наблюдение за компонентом подпишитесь на navchange свойство EventEmitter:

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

если мы подписываемся напрямую, то нам не понадобится subscribe() метод на NavService.

чтобы сделать NavService немного более инкапсулированным, вы можете добавить getNavChangeEmitter() метод и использовать это:

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

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

Если кто-то хочет следовать более реактивно ориентированному стилю программирования, то, безусловно, концепция "все является потоком" входит в картину и, следовательно, использовать наблюдаемые для работы с этими потоками как можно чаще.

вы можете использовать BehaviourSubject, как описано выше или есть еще один способ:

вы можете обрабатывать EventEmitter, как это: добавить селектор

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

}

теперь вы можете обрабатывать это событие, как предположим наблюдателя.деталь.html-это представление компонента Observer

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

затем в ObservingComponent.ТС

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

 }

вы должны использовать навигационный компонент в шаблоне ObservingComponent ( не забудьте добавить селектор в навигационную составляющую .. навигация-компонент для Ex )

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

и реализовать onNavGhange () в ObservingComponent

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

последнее дело .. вам не нужен атрибут события в @Componennt

events : ['navchange'], 

Я нашел другое решение для этого случая без использования Reactivex ни один из сервисов. Я действительно люблю RXJX API, однако я думаю, что это лучше всего подходит при разрешении асинхронной и/или сложной функции. Используя его таким образом, его довольно превзошел меня.

что я думаю, что вы ищете для трансляции. Только это. И я нашел это решение:

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

Это полный рабочий пример: https://plnkr.co/edit/xGVuFBOpk2GP0pRBImsE