怎么在Angular中实现不同组件间的数据传递

怎么在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    }   })  } }

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。