Delegasyon: EventEmitter veya Açısal Olarak Gözlenebilir

Angular'da delegasyon kalıbı gibi bir şey uygulamaya çalışıyorum. Kullanıcı a'yı tıklattığında, nav-itemdaha sonra olayı dinleyen başka bir bileşen tarafından ele alınması gereken bir olay yayan bir işlevi çağırmak istiyorum.

İşte senaryo: Bir Navigationbileşen var:

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

@Component({
    // other properties left out for brevity
    events : ['navchange'], 
    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)
    }

}

İşte gözlem bileşeni:

export class ObservingComponent {

  // How do I observe the event ? 
  // <----------Observe/Register Event ?-------->

  public selectedNavItem(item: number) {
    console.log('item index changed!');
  }

}

Anahtar soru şudur: Gözlemleme bileşeninin söz konusu olayı nasıl gözlemlemesini sağlarım?

2016-06-27 Güncellemesi: Gözlemlenebilirler kullanmak yerine aşağıdakilerden birini kullanın:

• @Abdulrahman tarafından bir yorumda önerildiği gibi bir BehaviorSubject veya
• @Jason Goemaat tarafından bir yorumda önerildiği gibi bir ReplaySubject

Bir Konu hem bir Gözlemlenebilir (bunu yapabiliriz subscribe()) hem de bir Gözlemcidir (böylece next()yeni bir değer yaymak için onu çağırabiliriz ). Bu özellikten yararlanıyoruz. Bir Konu, değerlerin birçok Gözlemci için çok noktaya yayın olmasına izin verir. Bu özellikten faydalanmıyoruz (sadece bir Gözlemcimiz var).

BehaviorSubject , Subject'nin bir varyantıdır. "Geçerli değer" kavramına sahiptir. Bundan yararlanıyoruz: Bir ObservingComponent oluşturduğumuzda, geçerli gezinme öğesi değerini BehaviorSubject öğesinden otomatik olarak alır.

Aşağıdaki kod ve dalgıç BehaviorSubject kullanır.

ReplaySubject , Subject'nin başka bir çeşididir. Bir değer üretilinceye kadar beklemek istiyorsanız, kullanın ReplaySubject(1). Bir BehaviorSubject bir başlangıç ​​değeri gerektirdiğinden (hemen sağlanacaktır), ReplaySubject gerektirmez. ReplaySubject her zaman en son değeri sağlar, ancak gerekli başlangıç ​​değerine sahip olmadığından, hizmet ilk değerini döndürmeden önce bazı zaman uyumsuz işlemler yapabilir. En son değere sahip sonraki aramalarda hemen tetiklenir. Sadece bir değer istiyorsanız first(), aboneliği kullanın . Kullanırsanız abonelikten çıkmanız gerekmez first().

import {Injectable}      from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class NavService {
  // Observable navItem source
  private _navItemSource = new BehaviorSubject<number>(0);
  // Observable navItem stream
  navItem$ = this._navItemSource.asObservable();
  // service command
  changeNav(number) {
    this._navItemSource.next(number);
  }
}

import {Component}    from '@angular/core';
import {NavService}   from './nav.service';
import {Subscription} from 'rxjs/Subscription';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number;
  subscription:Subscription;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.subscription = this._navService.navItem$
       .subscribe(item => this.item = item)
  }
  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this.subscription.unsubscribe();
  }
}

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

Plunker

Gözlemlenebilir kullanan orijinal yanıt: (BehaviorSubject kullanmaktan daha fazla kod ve mantık gerektirir, bu yüzden tavsiye etmiyorum, ancak öğretici olabilir)

Yani, burada EventEmitter yerine Gözlemlenebilir kullanan bir uygulama . EventEmitter uygulamamın aksine, bu uygulama o anda seçili navItemolan hizmeti de depolar , böylece bir gözlemleme bileşeni oluşturulduğunda, geçerli değeri API çağrısı yoluyla alabilir navItem()ve ardından navChange$Gözlemlenebilir aracılığıyla değişikliklerden haberdar edilebilir .

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';

export class NavService {
  private _navItem = 0;
  navChange$: Observable<number>;
  private _observer: Observer;
  constructor() {
    this.navChange$ = new Observable(observer =>
      this._observer = observer).share();
    // share() allows multiple subscribers
  }
  changeNav(number) {
    this._navItem = number;
    this._observer.next(number);
  }
  navItem() {
    return this._navItem;
  }
}

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number;
  subscription: any;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.item = this._navService.navItem();
    this.subscription = this._navService.navChange$.subscribe(
      item => this.selectedNavItem(item));
  }
  selectedNavItem(item: number) {
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

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

Plunker

Ayrıca, gözlemlenebilirlere ek olarak kullanılan Bileşen Etkileşimi Yemek Kitabı örneğine bakın Subject. Örnek "ebeveyn ve çocuk iletişimi" olmasına rağmen, aynı teknik ilişkisiz bileşenler için de geçerlidir.

Flaş haber: Ben ekledim başka bir yanıt , bir EventEmitter yerine bir gözlemlenebilir kullanır. Bunun cevabını tavsiye ederim. Ve aslında, bir hizmette EventEmitter kullanmak kötü bir uygulamadır .

Orijinal cevap: (bunu yapma)

EventEmitter'ı, ObservingComponent öğesinin etkinliğe doğrudan abone olmasını (ve abonelikten çıkmasını) sağlayan bir hizmete yerleştirin :

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

Eğer denerseniz, Plunkerbu yaklaşımla ilgili sevmediğim birkaç şey var:

• ObservingComponent, yok edildiğinde aboneliğini iptal etmelidir
• geri arama çağrıldığında subscribe()doğru thisayarlanacak şekilde bileşeni iletmeliyiz

Güncelleme: İkinci madde işaretini çözen bir alternatif, ObservingComponent navchangeöğesinin doğrudan EventEmitter özelliğine abone olmasını sağlamaktır :

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

Doğrudan abone olursak subscribe(), NavService'te yönteme ihtiyacımız olmazdı.

NavService'i biraz daha kapsüllenmiş yapmak için bir getNavChangeEmitter()yöntem ekleyebilir ve bunu kullanabilirsiniz:

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

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

Eğer kişi daha Reaktif odaklı bir programlama tarzını takip etmek istiyorsa, kesinlikle "Her şey bir akıştır" kavramı ortaya çıkar ve bu nedenle bu akışlarla mümkün olduğunca sık ilgilenmek için Gözlemlenebilirler kullanın.

Şunlardan birini kullanabilirsiniz:

1. Davranış Konu:

BehaviorSubject bir tür öznedir, bir özne, gözlemlenebilir olarak hareket edebilen özel bir gözlemlenebilir türdür ve gözlemlenebilir diğer iletiler gibi mesajlara abone olabilirsiniz ve abonelik üzerine, gözlemlenebilir kaynak tarafından yayılan öznenin son değerini döndürür:

Avantaj: Bileşenler arasında veri iletmek için ebeveyn-çocuk ilişkisi gibi bir ilişki gerekmez.

NAV HİZMETİ

import {Injectable}      from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class NavService {
  private navSubject$ = new BehaviorSubject<number>(0);

  constructor() {  }

  // Event New Item Clicked
  navItemClicked(navItem: number) {
    this.navSubject$.next(number);
  }

 // Allowing Observer component to subscribe emitted data only
  getNavItemClicked$() {
   return this.navSubject$.asObservable();
  }
}

NAVİGASYON BİLEŞENİ

@Component({
  selector: 'navbar-list',
  template:`
    <ul>
      <li><a (click)="navItemClicked(1)">Item-1 Clicked</a></li>
      <li><a (click)="navItemClicked(2)">Item-2 Clicked</a></li>
      <li><a (click)="navItemClicked(3)">Item-3 Clicked</a></li>
      <li><a (click)="navItemClicked(4)">Item-4 Clicked</a></li>
    </ul>
})
export class Navigation {
  constructor(private navService:NavService) {}
  navItemClicked(item: number) {
    this.navService.navItemClicked(item);
  }
}

GÖZLEM BİLEŞENİ

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number;
  itemClickedSubcription:any

  constructor(private navService:NavService) {}
  ngOnInit() {

    this.itemClickedSubcription = this.navService
                                      .getNavItemClicked$
                                      .subscribe(
                                        item => this.selectedNavItem(item)
                                       );
  }
  selectedNavItem(item: number) {
    this.item = item;
  }

  ngOnDestroy() {
    this.itemClickedSubcription.unsubscribe();
  }
}

İkinci Yaklaşım Event Delegation in upward direction child -> parent

2. Alt öğeye veri ileten @Input ve @Output dekoratörleri üst öğelerini ve üst öğeye alt bildiren alt öğeyi kullanma

@ Cevapladı @Ashish Sharma.

ObservingComponent şablonunda Gezinme bileşenini kullanmanız gerekir ( Gezinme bileşenine bir seçici eklemeyi unutmayın. Ex için gezinme bileşeni)

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

Ve ObservingComponent öğesinde onNavGhange () yöntemini uygulayın

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

Son şey .. @Componennt'deki olaylar özelliğine ihtiyacınız yok

events : ['navchange'], 

BehaviourSubject öğesini yukarıda açıklandığı gibi kullanabilirsiniz veya başka bir yol daha vardır:

EventEmitter'ı şu şekilde işleyebilirsiniz: önce bir seçici ekleyin

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

}

Şimdi observer.component.html dosyasının Observer bileşeninin görünümü olduğunu varsayalım gibi bu olayı işleyebilirsiniz

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

sonra ObservingComponent.ts içinde

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

 }

Reactivex hizmetlerini kullanmadan bu durum için başka bir çözüm buldum. Aslında ben async ve / veya karmaşık bir işlevi çözerken en iyi gider düşünüyorum rxjx API seviyorum. Bu şekilde kullanarak, bu oldukça beni aştı.

Aradığınızı düşündüğüm bir yayın. Sadece bu. Ve bu çözümü buldum:

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

Bu tam çalışan bir örnektir: https://plnkr.co/edit/xGVuFBOpk2GP0pRBImsE