Delegacja: Zdarzenie lub obserwowalne w kątowym

Z OSTATNIEJ CHWILI: dodałem inną odpowiedź która używa obserwowalnego zamiast Eventemittera. Polecam tą odpowiedź. W rzeczywistości używanie Eventemittera w usłudze jest złą praktyką.

Oryginalna odpowiedź: (nie rób tego)

W przypadku, gdy nie jest to możliwe, nie jest to możliwe, ponieważ nie jest to możliwe, ponieważ nie jest to możliwe.]}

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

Jeśli spróbujesz Plunker, jest kilka rzeczy, których nie lubię w tym podejściu:

• ObservingComponent musi zrezygnować z subskrypcji, gdy zostanie zniszczony
• musimy przekazać komponent do subscribe() tak, aby właściwa this została ustawiona, gdy wywołanie zwrotne zostanie wywołane

Update: alternatywą, która rozwiązuje 2. bullet jest posiadanie ObservingComponent bezpośrednio subskrybować navchange właściwość EventEmitter:

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

Jeśli SUBSKRYBUJEMY bezpośrednio, to nie potrzebowałbym metody subscribe() w NavService.

Aby uczynić NavService nieco bardziej zamkniętym, możesz dodać metodę getNavChangeEmitter() i użyć tego:

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

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

Jeśli ktoś chce podążać za bardziej reaktywnym zorientowanym stylem programowania, to zdecydowanie pojawia się pojęcie "wszystko jest strumieniem" i dlatego używa Obserwabli, aby radzić sobie z tymi strumieniami tak często, jak to możliwe.

Możesz użyć BehaviourSubject jak opisano powyżej lub jest jeszcze jeden sposób:

Możesz obsługiwać EventEmitter w ten sposób: najpierw dodaj selektor

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

}

Teraz możesz obsłużyć to wydarzenie jak Załóżmy, że obserwator.komponent.html to Widok komponentu Observer

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

Następnie w Obserwacjiskładnik.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);
 }

 }

Musisz użyć komponentu Nawigacyjnego w szablonie ObservingComponent (nie zapomnij dodać selektora do komponentu nawigacyjnego .. nawigacja-komponent dla ex)

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

I zaimplementować onnavghange () w ObservingComponent

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

events : ['navchange'], 

Znalazłem inne rozwiązanie tej sprawy bez korzystania z usług Reactivex ani. Uwielbiam rxjx API, jednak myślę, że najlepiej sprawdza się przy rozwiązywaniu asynchronicznych i/lub złożonych funkcji. Używając go w ten sposób, jest dla mnie dość przekroczony.

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

To jest pełny przykład pracy: https://plnkr.co/edit/xGVuFBOpk2GP0pRBImsE