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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
vuex的module模块用法示例
Nov 12 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
如何写出好的Java代码
2014/04/25 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
汉语言文学职业规划
2014/02/14 职场文书
企业指导教师评语
2014/04/28 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
学校师德师风整改方案
2014/10/28 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS