Angular2：无法订阅从共享服务发出的自定义事件

Question

I've started learning Angular2 and I'm having trouble with custom events using emit/subscribe.

I created a little demo to demonstrate: Plunker

As you can see, there is a PreviewService class. This class has a setURL(url: string) method, that, if invoked, emits a contentUrlChange$ event.

src/services/preview.service.ts

import {Injectable, EventEmitter} from 'angular2/core';

@Injectable()
export class PreviewService {

  private _url: string;

  contentUrlChange$: EventEmitter<any>;

  constructor() {
    this.contentUrlChange$ = new EventEmitter;
  };

  setURL(url: string): void {
    this._url = url;
    this.contentUrlChange$.emit(url);
  };

}

In the constructor function of the App component, I subscribe to the PreviewService's contentUrlChange$ event. If you run the Plunker, you will see the alert window.

src/app.ts

[...]
constructor(private _previewService: PreviewService) {
  _previewService.contentUrlChange$.subscribe(url => {
    alert("APP " + url);
  })

  _previewService.setURL('http://www.example.com');
};
[...]

But here is my problem: I have another component, PreviewComponent, and in that component's constructor function, just like in the App component's constructor function, I subscribe to the PreviewService's contentUrlChange$ event. But strangely, the alert window that should appear, does not.

src/component/preview.component.ts

constructor(private _previewService: PreviewService) {
  _previewService.contentUrlChange$.subscribe(url => {
    alert("PREVIEW " + url); // Nothing happens here
  })
};

I read through a couple of questions/answers, which indicate that what I'm doing should be working, but still no success. Any thoughts/solutions would be greatly appreciated. Thx.

Answer 1

There where few issues with your plunk. First things first, if you inject separate instances of service to your components, they won't be able to subscribe to same event, simply because they will be different variables(properties). So you must provide same service for every component, simply do in bootstrap of your application:

bootstrap(App, [
  YourService
]).catch(...)

Secondly, you are emmiting value from app component when child component( PreviewComponent ) is not yet initialized . To wait, you could use setTimeout(func, 0) (but this is hack and I wouldn't recomend this), or simply use built in angular's OnInit lifecycle hook

import {OnInit} from 'angular2/core';

...


ngOnInit() {
  // emit values here
}

Here is updated plunk: http://plnkr.co/edit/okiNPFRKKYXfce1P0D5o

Answer 2

The problem is that each component gets it's own instance of the service.

A singleton service must be configured as a provider while bootstrapping the application. In your case this would be in main.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {PreviewService} from './services/preview.service';

bootstrap(App, [PreviewService]) // configure the PreviewService as a singleton for the entire application.
  .catch(err => console.error(err));

Then you must remove it as a provider for any particular component.

app.ts

import {PreviewService} from './services/preview.service';
import {PreviewComponent} from './components/preview.component';

@Component({
  selector: 'my-app',
  template: `<preview></preview>`,
  directives: [ PreviewComponent ]
})

preview.component.ts

import {Component} from 'angular2/core';
import {PreviewService} from '../services/preview.service';

@Component({
   selector: 'preview',
   template: ``
})

Another thing is that the constructor of the App component will be called before the constructor of the PreviewComponent .

That means if you make the URL change in the App constructor the PreviewComponent will not have subscribed yet.

I fixed it by making the change on a timeout, I guess that will differ in real life.

export class App {
  constructor(private _previewService: PreviewService) {
    console.log('app created');
    _previewService.contentUrlChange$.subscribe(url => {
      alert("APP " + url);
    })

    setTimeout(() => {
      alert('setting url');
      _previewService.setURL('http://www.example.com');  
    }, 1000); 

  }
}

You can see the corrected plunker here .