Angular事件之不同组件间传递数据的方法
利用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
}
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Angular 向组件传递模板的两种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时候,组件的一部分模板就需要由调用方提供. 在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能. 第一种方式 <ng-content> <ng-conten
-
Angular5.0 子组件通过service传递值给父组件的方法
一.引言 我们使用ngx-loading,需要在app.component.html上写模板,绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件,就需要在每个组件的html重新写模板,这就显得累赘了.在此,我们以ngx-loading为例,展示子组件如何通过service改变app组件中的布尔值loading. // app.component.html <ngx-loading [show]="loading" [config]="{
-
angularjs2中父子组件的数据传递的实例代码
父到子组件之间的数据传递 父组件模板中引用子组件 // father template: ... <child-item [name] = "fatherItemName" > </child-item> //...` 其中"fatherItemName" 为父组件中的属性,[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性 _na
-
angular2 组件之间通过service互相传递的实例
母组件传值给子组件 母组件通过service传值给子组件,很简单,声明一个service @Injectable() export class ToolbarTitleService { title:string; } 然后在母组件中依赖注入 @Component({ selector: 'admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.scss'], providers: [Toolba
-
Angular 2父子组件数据传递之局部变量获取子组件其他成员
前言 本文主要介绍的是关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关内容,话不多说,来看看详细介绍: 通过@Input和@Output可以实现数据之间的传递,但是无法获取子组件的类属性和类方法,接下来我们通过局部变量方式实现获取子组件其他成员 第一步:定义子组件: ChildenComponent.ts (1).子组件中之定义了一个fun1()方法,提供给父组件调用 第二步:定义父组件 ParentComponent.ts ParentComponent.html
-
浅谈angular2子组件的事件传递(任意组件事件传递)
angular2子组件的事件传递 angular2有很多组件组成,画面由很多路由,导致事件的传递很"笨拙",本组的技术负责人发现了任意组件传递事件的这个方法,教会了我,我做个笔记. 项目情况: 画面结构复杂,路由数目偏多,组件数目多,嵌套复杂.业务要求:任何出现人名的地方,点击人名,直接打开和这个人的聊天画面 以前用angular2官网给的烹饪技巧基本解决90%的需求,当然这个如果是用Input,Output也可以,但是那样的话,结构将是混沌状态. 附:angluar2的组件通讯的传送
-
angular6.0使用教程之父组件通过url传递id给子组件的方法
在angular6.0使用教程:angular主从组件章节我们介绍了父组件向子组件传递数据,当时是在同一个页面传递数据的.而本章的angular数据传递将是在不同页面间的传递,即list组件页面向post组件页面传递数据. 第一步:配置post组件的路由: 在上一章angular6.0使用教程:angular6.0的路由使用中我们为angular6.0项目设置了路由,我们只设置了home组件和list组件的路由.我们还要设置post组件的路由,因为post是产品组件,而不同的产品会有不同的id,
-
Angular事件之不同组件间传递数据的方法
利用Angular Event在不同组件之间传递数据 为了实现在Angular不同Component之间相互传递数据,可以使用Event分发的思路来实现. 使用事件实现在不同组件之前传递数据的思路如下: 定义一个服务,用来实现事件的发布和订阅方法. 组件A注入事件服务的依赖,将自己要传递数据的数据以事件的形式发布出去. 组件B注入事件服务的依赖,并订阅相关事件. 定义一个服务 在终端输入 ng g service event Angular会自动在项目的app目录下生成 event.servic
-
vue2.0父子组件间传递数据的方法
关于父子组件之间传递数据其实文档上都说得很明白. 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <template> <child :child-msg="msg" @ok="event"></child> </template> <script> import child from './child.vue'; export default { data(){
-
vue父组件向子组件(props)传递数据的方法
vue页面结构 在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(
-
vue中各组件之间传递数据的方法示例
前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.
-
vue.js组件之间传递数据的方法
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe
-
vue2.0 父组件给子组件传递数据的方法
在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件. 1.安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2.删除 1.删除App中的一些内容如下 2.删除components文件中的HelloWorld.vue 3.修改 修改App.vue 如下: <templ
-
angular中不同的组件间传值与通信的方法
本文主要介绍angular在不同的组件中如何进行传值,如何通讯.主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: 子组件创建事件EventEmitter对象,使用@output公开出去: 父组件监听子组件@output出来的方法,然后处理事件. 代码: // child 组件 @Component({ selector: 'app-child',
-
深入浅析Vue不同场景下组件间的数据交流
正文 浅谈Vue不同场景下组件间的数据"交流" Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是"方法论",而不是"场景论",这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据"交流"的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传
-
vuejs事件中心管理组件间的通信详解
本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下 事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听 事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w
-
vuejs动态组件给子组件传递数据的方法详解
通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s