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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue params、query传参使用详解
Sep 12 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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学习资料汇总与网址
2007/03/16 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
php xml文件操作代码(一)
2009/03/20 PHP
PHP print类函数使用总结
2010/06/25 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python获取当前日期和时间的方法
2015/04/30 Python
python实现飞机大战游戏
2020/10/26 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
安全生产网格化管理实施方案
2014/03/01 职场文书
汇源肾宝广告词
2014/03/20 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
工作检讨书怎么写
2015/01/23 职场文书
社区国庆节活动总结
2015/03/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python