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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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 - Html Transfer Code
2006/10/09 PHP
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python实现发送邮件功能
2017/07/22 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Django的models模型的具体使用
2019/07/15 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
python中time tzset()函数实例用法
2021/02/18 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Shell如何接收变量输入
2016/08/06 面试题
管理站站长岗位职责
2013/11/27 职场文书
单位领导证婚词
2014/01/14 职场文书
保险经纪人求职信
2014/03/11 职场文书
重阳节活动总结
2014/08/27 职场文书
教师个人年终总结
2015/02/11 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
python异常中else的实例用法
2021/06/15 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android