向服务订阅多个Angular2组件

玛丽安07

我试图使两个Components通过DOM事件响应Service得到通知Component

这应该使用RxJS Subject Observable或其直接子类(可能是BehaviorSubject或ReplaySubject)来实现。

这是模型:

  • 触发器组件
  • NotificationService
  • FirstListeningComponent
  • SecondListeningComponent

这三个部分都不是父子关系。

我尝试遵循以下方法:

  1. Angular2父母和子女通过服务进行沟通
  2. RxJSObservable演示说明

但是我没有设法使它们适应我的需求。


在plnkr.co上查看我的实时示例

我在正确的道路上吗?

谢谢

吉列尔梅·梅雷莱斯

我用工作版本修复了您的pl子

问题在于为每个组件都创建了NotificationService的新实例。它应该只存在一个在主组件中创建的实例,并且组件应该共享该实例以进行通信。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br>
      <trigger-component></trigger-component>

      <first-listening-component></first-listening-component>
      <second-listening-component></second-listening-component>
    </div>
  `,
  providers : [NotificationService]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

何时将服务分配给angular2组件或服务中的“ this”?

来自分类Dev

Angular2:通过服务在2组件之间传递对象

来自分类Dev

如何使用ng2-dragula拖放到多个Angular2组件

来自分类Dev

Angular2组件无法通过服务中的可观察性进行通信

来自分类Dev

通过共享单例服务进行Angular2组件通信

来自分类Dev

angular2组件中的多个动画触发器

来自分类Dev

尝试在angular2组件中使用exportAs

来自分类Dev

CodeMirror作为Angular2组件

来自分类常见问题

Angular2组件@Input双向绑定

来自分类Dev

Angular2组件模板与视图模板

来自分类Dev

Angular2组件-动态内联样式

来自分类Dev

Angular2组件::按类的ViewChild / ContentChild

来自分类Dev

Angular2组件是单向绑定还是输入?

来自分类Dev

以编程方式插入不同的Angular2组件

来自分类Dev

使用javascript协调angular2组件

来自分类Dev

获取传递到Angular2组件的数据

来自分类Dev

HTML代码形式Angular2组件属性

来自分类Dev

如何使angular2组件ng无效

来自分类Dev

测试使用setInterval或setTimeout的Angular2组件

来自分类Dev

Angular2组件构造函数未调用

来自分类Dev

CodeMirror作为Angular2组件

来自分类Dev

尝试在angular2组件中使用exportAs

来自分类Dev

使用javascript协调angular2组件

来自分类Dev

如何使angular2组件ng无效

来自分类Dev

JS中的Angular2组件通信

来自分类Dev

从VisJS Event调用Angular2组件函数

来自分类Dev

Angular2 Dart-在Angular2组件中获取文本

来自分类Dev

Angular2 Dart-在Angular2组件中获取文本

来自分类Dev

在导航到Angular 2组件中的路径时传递@Input并订阅@Output