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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
jquery json 实例代码
Dec 02 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
javascript操作excel生成报表示例
May 08 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
一个域名查询的程序
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
PHP使用函数用法详解
2018/09/30 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
常用js脚本
2006/12/03 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
犀利的js 函数集合
2009/06/11 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
Vue实现日历小插件
2019/06/26 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
上班早退检讨书
2014/01/09 职场文书
气象学专业个人求职信
2014/04/22 职场文书
微电影大赛策划方案
2014/06/05 职场文书
本科毕业生求职信
2014/06/15 职场文书
学雷锋的心得体会
2014/09/04 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
详细介绍python类及类的用法
2021/05/31 Python
python opencv旋转图片的使用方法
2021/06/04 Python