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面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
webpack优化的深入理解
Dec 10 Javascript
详解vue在项目中使用百度地图
Mar 26 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实现简单的MVC框架实例
2015/09/23 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
range 标准化之获取
2011/08/28 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python opencv实现运动检测
2018/07/10 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
基于python调用psutil模块过程解析
2019/12/20 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
天猫活动策划方案
2014/08/21 职场文书
文明家庭事迹材料
2014/12/20 职场文书
开业典礼致辞
2015/07/29 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Python 数据可视化之Seaborn详解
2021/11/02 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
MySQL新手入门进阶语句汇总
2022/09/23 MySQL