怎么在angular中实现不同组件间的数据传递-亚博电竞手机版

怎么在angular中实现不同组件间的数据传递？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

利用angular event在不同组件之间传递数据

为了实现在angular不同component之间相互传递数据，可以使用event分发的思路来实现。

使用事件实现在不同组件之前传递数据的思路如下：

• 定义一个服务，用来实现事件的发布和订阅方法。

• 组件a注入事件服务的依赖，将自己要传递数据的数据以事件的形式发布出去。

• 组件b注入事件服务的依赖，并订阅相关事件。

定义一个服务

在终端输入

nggserviceevent

angular会自动在项目的app目录下生成 event.service.ts 和 event.service.spec.ts 两个文件。

我们在 event.service.ts 文件中完成相关业务代码即可。

例如，我们在改服务中实现发布事件和订阅事件的方法:

import{injectable}from'@angular/core'; import{subject}from'rxjs';  @injectable({ providedin:'root' }) exportclasseventservice{ //构建subject的实例，用来完成事件的发布和订阅 privatesubject=newsubject(); 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] }) exportclassappmodule{}

利用eventservice在不同组件间传递数据

假定组件a中的数据需要传递到组件b中，这里的数据可以是事件、文本内容、状态改变等等东西。 则在组件a中，我们可以发布一个事件，组件b订阅该事件即可。

在组件a中发布事件

exportclassacomponentimplementsoninit{ constructor( privateevent:eventservice ){} ngoninit(){ } somethingchanged(data){ //发布事件 this.event.publish({ //可以定义一个事件类型，实现多个不同类型事件的发布 type:'event_type_you_want_define', //可以携带任何数据，并通过事件发布出去 data:data, ohter:'ohterthingsyouwanttopassout' },err); } }

在组件b中订阅事件

exportbcomponentimplementsoninit{ constructor( privateevent:eventservice ){} ngoninit(){ //在初始化方法中，可以完成对事件的订阅工作 this.event.subject({ next:value=>{ //可以通过约定事件类型，在这里进行检查，从而完成不同的逻辑 //dosomethingwithvalue }, error:err=>{ //handleerr }, complete:()=>{ //handlecomplete } }) } }

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