[javascript] Angular2의 서비스 이벤트를 구독하는 방법은 무엇입니까?

Program / 글쓴이

EventEmitter로 이벤트를 발생시키는 방법을 알고 있습니다. 다음과 같은 구성 요소가있는 경우 호출 할 메서드를 연결할 수도 있습니다.

<component-with-event (myevent)="mymethod($event)" />

이와 같은 구성 요소가 있으면 모든 것이 잘 작동합니다. 일부 로직을 서비스로 이동했고 서비스 내부에서 이벤트를 발생시켜야합니다. 내가 한 일은 다음과 같습니다.

export class MyService {
  myevent: EventEmitter = new EventEmitter();

  someMethodThatWillRaiseEvent() {
    this.myevent.next({data: 'fun'});
  }
}

이 이벤트를 기반으로 일부 값을 업데이트해야하는 구성 요소가 있지만 제대로 작동하지 않는 것 같습니다. 내가 시도한 것은 다음과 같습니다.

//Annotations...
export class MyComponent {
  constructor(myService: MyService) {
    //myService is injected properly and i already use methods/shared data on this.
    myService.myevent.on(... // 'on' is not a method <-- not working
    myService.myevent.subscribe(.. // subscribe is not a method <-- not working
  }
}

이벤트를 발생시키는 서비스가 컴포넌트가 아닌 경우 MyComponent가 이벤트를 구독하게하려면 어떻게해야합니까?

2.0.0-alpha.28에 있습니다.

편집 : 실제로 작동하도록 내 “작동 예제”를 수정하여 작동하지 않는 부분에 초점을 맞출 수 있습니다.)

예제 코드 :
http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

답변

업데이트 : EventEmitter가 아닌 BehaviorSubject 또는 Observable을 사용하여이 문제를 해결하는 더 나은 / 적절한 방법을 찾았습니다. 이 답변을 참조하십시오 : https://stackoverflow.com/a/35568924/215945

또한 Angular 문서에는 이제 Subject를 사용하는 요리 책 예제가 있습니다.

원래 / 오래된 / 오답 : 다시 말하지만 서비스에서 EventEmitter를 사용하지 마십시오 . 그것은 반 패턴입니다.

beta.1 사용 중 … NavService에는 EventEmiter가 포함되어 있습니다. 구성 요소 탐색은 서비스를 통해 이벤트를 내보내고 구성 요소 ObservingComponent는 이벤트를 구독합니다.

nav.service.ts

import {EventEmitter} from 'angular2/core';
export class NavService {
  navchange: EventEmitter<number> = new EventEmitter();
  constructor() {}
  emitNavChangeEvent(number) {
    this.navchange.emit(number);
  }
  getNavChangeEmitter() {
    return this.navchange;
  }
}

components.ts

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number = 0;
  subscription: any;
  constructor(private navService:NavService) {}
  ngOnInit() {
    this.subscription = this.navService.getNavChangeEmitter()
      .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 = 1;
  constructor(private navService:NavService) {}
  selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navService.emitNavChangeEvent(item);
  }
}

Plunker

답변

알파 28을 사용하여 eventEmitter.toRx().subscribe(..)메서드 를 통해 이벤트 이미 터를 프로그래밍 방식으로 구독했습니다 . 직관적이지 않기 때문에 향후 릴리스에서 변경 될 수 있습니다.

답변