[angular] 위임 : EventEmitter 또는 Angular에서 관찰 가능

Program / 글쓴이

Angular에서 위임 패턴과 같은 것을 구현하려고합니다. 사용자가를 클릭 nav-item하면 함수를 호출하고 이벤트를 내보내는 이벤트를 내보내고 이벤트를 수신하는 다른 구성 요소가 처리해야합니다.

시나리오는 다음과 같습니다. Navigation구성 요소가 있습니다.

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

}

관찰 구성 요소는 다음과 같습니다. 

export class ObservingComponent {

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

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

}

핵심 질문은 관찰 구성 요소가 문제의 이벤트를 어떻게 관찰하도록하는 것입니까?

답변

2016-06-27 업데이트 : Observable을 사용하는 대신 다음 중 하나를 사용하십시오.

  • 주석에서 @Abdulrahman이 권장하는 BehaviorSubject
  • 댓글에서 @Jason Goemaat가 추천 한 ReplaySubject

주제는 모두 피 감시 (우리가 할 수 있도록 subscribe()(우리가 호출 할 수 있도록하는 방법)과 옵저버 next()새 값을 방출하는 데에). 우리는이 기능을 이용합니다. 주체는 값을 많은 관찰자에게 멀티 캐스트 할 수 있습니다. 우리는이 기능을 이용하지 않습니다 (우리는 하나의 관찰자 만 있습니다).

BehaviorSubject 는 Subject의 변형입니다. “현재 값”이라는 개념이 있습니다. ObservingComponent를 만들 때마다 BehaviorSubject에서 현재 탐색 항목 값을 자동으로 가져옵니다.

아래 코드와 플런저 는 BehaviorSubject를 사용합니다.

ReplaySubject 는 Subject의 또 다른 변형입니다. 실제로 값이 생성 될 때까지 기다리려면을 사용하십시오 ReplaySubject(1). BehaviorSubject에는 초기 값 (즉시 제공)이 필요하지만 ReplaySubject는 필요하지 않습니다. ReplaySubject는 항상 최신 값을 제공하지만 필요한 초기 값이 없으므로 서비스는 첫 번째 값을 반환하기 전에 비동기 작업을 수행 할 수 있습니다. 가장 최근 값을 가진 후속 통화에서 즉시 실행됩니다. 하나의 값만 원하면 first()구독 에서 사용 하십시오. 를 사용하는 경우 구독을 취소 할 필요가 없습니다 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

Observable을 사용하는 원래 답변 : (BehaviorSubject를 사용하는 것보다 더 많은 코드와 논리가 필요하므로 권장하지 않지만 유익 할 수 있습니다)

여기 EventEmitter 대신 Observable을 사용하는 구현이 있습니다. 내 EventEmitter 구현과 달리이 구현은 현재 navItem서비스에서 선택된 서비스를 저장 하므로 관찰 컴포넌트가 작성 될 때 API 호출을 통해 현재 값을 검색 navItem()한 후 navChange$Observable을 통해 변경 사항을 통지 할 수 있습니다 .

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

옵저버 블 과 함께를 사용하는 Component Interaction Cookbook 예제 도 참조하십시오 Subject. 예제는 “부모 및 자식 통신”이지만 관련없는 구성 요소에 동일한 기술을 적용 할 수 있습니다.

답변

속보 : EventEmitter가 아닌 Observable을 사용하는 다른 답변 을 추가했습니다 . 나는 이것에 대한 대답을 권장합니다. 실제로 서비스에서 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이 설정 되도록 컴포넌트를 전달해야합니다

업데이트 : 두 번째 글 머리 기호를 해결하는 대안은 ObservingComponent가 navchangeEventEmitter 속성 을 직접 구독하도록하는 것입니다.

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

답변

보다 반응성 지향적 인 프로그래밍 스타일을 따르기를 원한다면, “모든 것이 스트림이다”라는 개념이 분명히 나타나기 때문에 Observables를 사용하여 이러한 스트림을 가능한 한 자주 처리하십시오.

답변

다음 중 하나를 사용할 수 있습니다.

  1. 행동 주제 :

BehaviorSubject는 주제의 한 유형이며, 주제는 관찰 가능한 역할을 할 수있는 특수한 유형의 관찰 가능하며 관찰자는 다른 관찰 가능과 마찬가지로 메시지를 구독 할 수 있으며 구독하면 소스 관찰 가능 개체가 방출 한 주제의 마지막 값을 반환합니다.

이점 : 구성 요소간에 데이터를 전달하는 데 필요한 부모-자식 관계와 같은 관계가 없습니다.

탐색 서비스

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

탐색 구성 요소

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

관찰 구성 요소

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

두 번째 접근법은 Event Delegation in upward direction child -> parent

  1. @Input 및 @Output 데코레이터 사용 부모가 자식 구성 요소에 자식 데이터를 전달하고 자식 구성 요소에 알림

예 : @Ashish Sharma가 제공 한 답변.

답변

ObservingComponent 템플릿에서 Navigation 구성 요소를 사용해야합니다 (예 : Navigation 구성 요소에 선택기 를 추가하는 것을 잊지 마십시오 .

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

그리고 ObservingComponent에서 onNavGhange ()을 구현하십시오.

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

마지막으로 .. @Componennt 의 events 속성이 필요하지 않습니다

events : ['navchange'],

답변

위에서 설명한대로 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)
}

}

이제
observer.component.html이 Observer 컴포넌트의 뷰라고 가정 해 봅시다. 

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

그런 다음 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);
 }

 }

답변

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