Angular组件之间通信

更新日期: 2019-10-22 阅读: 2.6k 标签: 通信

组合通信分为很多种;

  1. 父向子(数据绑定)(@Input())
  2. 子向父(事件监听)(EventEmitter)
  3. 通过公共服务(使用 rxjs)

特别需要注意: 这个公共服务需要在同一个注册器下,比如在root注册器下,如果不在可能会出现订阅不到的问题  

    // 服务
    @Injectable({providedIn: 'root'})
    export class IndexTitleService {

     _title = new Subject<string>();
     _describe = new Subject<string>();

     titleSubscribe = this._title.asObservable();
      describeSubscribe = this._describe.asObservable();

    constructor() {

    }

    changeTitle(title: string) {
      this._title.next(title);
    }

    changeDescribe(des: string) {
      this._describe.next(des);
    }

    }
// A组件 产生变化 
constructor(private titleService: IndexTitleService) {
    titleService.changeTitle('欢迎');
}
  // B组件 接收变化
constructor(private location: Location, private titleService: IndexTitleService) {
  this.titleSub = titleService.titleSubscribe.subscribe(value => {
    this.title = value;
  });
  this.desSub = titleService.describeSubscribe.subscribe(value => {
    this.describe = value;
  });
}


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7294

相关推荐

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

两个浏览器窗口间通信总结

两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型

客户端与服务端长连接的几种方式

ajax 轮询实现原理:ajax 轮询指客户端每间隔一段时间向服务端发起请求,保持数据的同步。优点:可实现基础(指间隔时间较短)的数据更新。

如何与 Service Worker 通信

Service Worker 很棒。它们使 Web 开发人员可以实现以前原生应用专有的类似功能。这类功能是例如推送通知或后台同步的离线功能。它们是渐进式 Web 应用的核心。但是在设置它们之后

浏览器标签页之间通信的实现

前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props

vue中eventBus的使用

使用场景:1、兄弟组件的通信,父子组件的通信;2、不同路由的通信.针对兄弟组件的通信,父子组件的通信,在需要通信的组件中引入bus.js,一个组件触发事件,另一个组件监听事件

Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!