我想将数据发送到我所有名为'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元素,但我有组件的问题。我如何将所有'模态'元素挂钩到可观察的?
感谢您的帮助
答案 0 :(得分:2)
实际上,您需要将所有这些组件共享同一个实例。为此,请在主要组件的providers
属性中设置服务:
@Component({
(...)
providers: [ ModalService ]
})
export class AppComponent {
(...)
}