使用observable - angular2将数据发送到所有订阅者元素

时间:2016-06-28 16:06:26

标签: javascript typescript angular observable

我想将数据发送到我所有名为'modal'的元素,但只有其中一个传递消息。

我有服务:

@Injectable()
export class ModalService {

private _isOpen = new Subject();
isOpen$ = this._isOpen.asObservable();

open(id: string) {
    this._isOpen.next({isOpen: true, id: id});
}

close(id: string) {
    this._isOpen.next({isOpen: false, id: id});
}

和组件:

import {Component, Input} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

import {ModalService} from './modal.service';


@Component({
     selector: 'modal',
     template: `
     <ng-content></ng-content>`,
     styleUrls: ['app/workshop/modal.component.css'],
     providers: [ModalService],

})

export class ModalComponent {

@Input() ID;

private show = false;

constructor(private _modal: ModalService) {

    this._modal.isOpen$.subscribe(
        (value) => {
            console.log(value)
            if(this.ID === value.id) {
                this.show = value.isOpen;
            }
        }
    );

}

open() {
    this._modal.open(this.ID);
}

close() {
    this._modal.close(this.ID);
}

}

一切正常,但当我想在任何其他组件中注入服务并向其他订阅者发送消息时,问题就出现了。我不知道我如何分享'模态'的所有元素类型的消息。我可以挂钩DOM元素,但我有组件的问题。我如何将所有'模态'元素挂钩到可观察的?

感谢您的帮助

1 个答案:

答案 0 :(得分:2)

实际上,您需要将所有这些组件共享同一个实例。为此,请在主要组件的providers属性中设置服务:

@Component({
  (...)
  providers: [ ModalService ]
})
export class AppComponent {
  (...)
}