时间:2021-05-28
利用Angular Event在不同组件之间传递数据
为了实现在Angular不同Component之间相互传递数据,可以使用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 } }) }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
angular2子组件的事件传递angular2有很多组件组成,画面由很多路由,导致事件的传递很“笨拙”,本组的技术负责人发现了任意组件传递事件的这个方法,教会
在angular6.0使用教程:angular主从组件章节我们介绍了父组件向子组件传递数据,当时是在同一个页面传递数据的。而本章的angular数据传递将是在不
vue项目中不同组件间通信一般使用vuex,通常情况下vuex和EventBus不应该混用,不过某些场景下不同组件间只有消息的交互,这时使用EventBus消息
一、组件间的数据传递1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级*vm.$emit(事件名,数据);*v-on:@示例用法:当点击send按钮
前言之前在《Angular2父子组件数据传递之局部变量获取子组件其他成员》讲到过(如果有不懂的,可以先去看看),通过在子组件模版上设置局部变量的方式获取子组件的