Angular2：无法订阅从共享服务发出的自定义事件 [英] Angular2: Cannot subscribe to custom events emitted from shared service

问题描述

我已经开始学习Angular2和我在使用自定义事件EMIT /订阅的麻烦。

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

我创建了一个小的演示证明： Plunker

I created a little demo to demonstrate: Plunker

正如你所看到的，有一个previewService类。这个类有一个setURL（网址：字符串）。方法是，如果调用，发出contentUrlChange $事件

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 /服务/ 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);
  };

}

在应用程序组件的构造函数，我订阅了previewService的contentUrlChange $事件。如果您运行Plunker，您将看到警告窗口。

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');
};
[...]

但这里是我的问题：我有另一个组件，previewComponent，并在该组件的构造函数，就像在应用程序组件的构造函数中，我订阅了previewService的contentUrlChange $事件。但奇怪的是，应该出现的警告窗口，其实不然。

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 /组件/ preview.component.ts

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

我通过几个问题/答案，这说明我做的应该是工作什么阅读，但仍然没有成功。任何想法/解决方案将大大AP preciated。 THX。

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.

推荐答案

有哪里与你普拉克几个问题。首先第一件事情，如果你的服务注入到你的组件的不同实例，他们将不能够订阅同一事件，仅仅是因为他们将不同的变量（属性）。所以，你必须为每个组件提供同样的服务，简单地做你的应用程序的引导：

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(...)

其次，你从应用程序组件emmiting值时，子组件（ previewComponent ）的尚未初始化。等待，你可以使用的setTimeout（FUNC，0）（但这是黑客，我不会推荐这一点），或简单地使用内置角的的OnInit 生命周期挂钩

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
}

下面更新普拉克： http://plnkr.co/edit/okiNPFRKKYXfce1P0D5o

这篇关于Angular2：无法订阅从共享服务发出的自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！