Angular事件之不同组件间传递数据的方法
利用AngularEvent在不同组件之间传递数据
为了实现在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
}
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。