如何订阅事件在angular2服务？ [英] how to subscribe to an event on a service in angular2?

问题描述

我知道如何提高与EventEmitter的事件。我还可以附加一个方法被调用，如果我有这样的组件：

I know how to raise an event with the EventEmitter. I can also attach a method to be called if i have a component like this:

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

当我有这样的一个组成部分，一切都很正常。我有些感动逻辑放到一个服务，我需要从服务内部引发事件。我所做的是这样的：

When i have a component like this, everything works great. I moved some logic into a service and i need to raise an event from inside the Service. What i did was this:

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

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

我有一个需要更新基于此事件的一些值的部分，但我似乎无法使它发挥作用。我的尝试是这样的：

I have a component that needs to update some value based on this event but i can't seem to make it work. What i tried was this:

//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的订阅事件时提高它的服务不是组件？

How do i make MyComponent subscribe to the event when the service that raises it is not a component?

我对在2.0.0 alpha.28

I'm on On 2.0.0-alpha.28

编辑：修改了工作示例实际工作，使重点可以在不工作的部分予以纠正;）

Modified my "working example" to actually work, so focus can be put on the not-working part ;)

举例code：
http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

推荐答案

更新：我已经找到了更好的办法用观察到的，而不是一个EventEmitter来解决这个问题。请参阅这样的回答： http://stackoverflow.com/a/35568924/215945

Update: I have found a better way to solve this problem using an Observable rather than an EventEmitter. Please see this answer: http://stackoverflow.com/a/35568924/215945

此外，角文档现在有一个<一个href=\"https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service\">cookbook例如，使用一个主题。

Also, the Angular docs now have a cookbook example that uses a Subject.

使用beta.1 ... NavService包含EventEmiter。组件导航通过ObservingComponent订阅事件的服务和组件发出的事件。

Using beta.1... NavService contains the EventEmiter. Component Navigation emits events via the service, and component ObservingComponent subscribes to the events.

nav.service.ts

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

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

这篇关于如何订阅事件在angular2服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！