Angular事件之不同组件间传递数据的方法


Posted in Javascript onNovember 15, 2018

利用Angular Event在不同组件之间传递数据

为了实现在Angular不同Component之间相互传递数据,可以使用Event分发的思路来实现。

使用事件实现在不同组件之前传递数据的思路如下:

  • 定义一个服务,用来实现事件的发布和订阅方法。
  • 组件A注入事件服务的依赖,将自己要传递数据的数据以事件的形式发布出去。
  • 组件B注入事件服务的依赖,并订阅相关事件。

定义一个服务

在终端输入

ng g service event

Angular会自动在项目的app目录下生成 event.service.ts 和 event.service.spec.ts 两个文件。

我们在 event.service.ts 文件中完成相关业务代码即可。

例如,我们在改服务中实现发布事件和订阅事件的方法:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventService {
  // 构建Subject的实例,用来完成事件的发布和订阅
  private subject = new Subject < any > ();
  constructor() {}
  publish(value: any, err: any) {
    if (value !== undefined) {
      // 将新的事件放入next队列中
      this.subject.next(value);
    }
    if (err !== undefined) {
      // 将错误放入error队列
      this.subject.error(err);
    }
    // 表示当前事件结束
    this.subject.complete();
  }

  subcribe(handler: {
   next: (value) => void,
   error: (err) => void,
   complete: () => void
  }) {
    this.subject.asObservable().subcribe(handler);
  }
}

最后,为了能让我们定义的服务能够被注入到其他组件中,我们还需要在app.modules.ts文件中注册我们的服务:

@NgModule({
 declarations: [],
 imports: [],
 providers: [EventService],
 bootstrap: [AppComponent]
})
export class AppModule { }

利用EventService在不同组件间传递数据

假定组件A中的数据需要传递到组件B中,这里的数据可以是事件、文本内容、状态改变等等东西。 则在组件A中,我们可以发布一个事件,组件B订阅该事件即可。

在组件A中发布事件

export class AComponent implements OnInit {
 constructor(
  private event: EventService
 ) { }
 ngOnInit() {
 }
 someThingChanged(data) {
  // 发布事件
  this.event.publish({
   // 可以定义一个事件类型,实现多个不同类型事件的发布
   type: 'event_type_you_want_define',
   // 可以携带任何数据,并通过事件发布出去
   data: data,
   ohter: 'ohter things you want to pass out'
  }, err);
 }
}

在组件B中订阅事件

export BComponent implements OnInit {
 constructor(
  private event: EventService
 ) { }
 ngOnInit() {
   // 在初始化方法中,可以完成对事件的订阅工作
  this.event.subject({
   next: value => {
    // 可以通过约定事件类型,在这里进行检查,从而完成不同的逻辑
    // do something with value
   },
   error: err => {
    // handle err
   },
   complete: () => {
    // handle complete
   }
  })
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
浅谈es6中的元编程
Dec 01 Javascript
vue 移动端适配方案详解
Nov 15 #Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 #Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 #Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 #Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 #Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 #Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 #Javascript
You might like
PHP动态变静态原理
2006/11/25 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python的concat等多种用法详解
2018/11/28 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python自动登录QQ的实现示例
2020/08/28 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
二年级学生评语大全
2014/04/23 职场文书
还款承诺书范本
2015/01/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python