欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular事件之不同组件间传递数据的方法

程序员文章站 2022-06-06 09:28:07
利用angular event在不同组件之间传递数据 为了实现在angular不同component之间相互传递数据,可以使用event分发的思路来实现。 使用...

利用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
   }
  })
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。