从发射值中获取数据

Question

我正试图从第二个组件中的emmitted值中获取数据参数的值

这是我的代码

组件1 TS

this.myService.emitChange({emitValue: 'openFunctionInSidePanel',  data: data });

组件2服务文件

private emitChangeSource = new Subject<any>();
changeEmitted$ = this.emitChangeSource.asObservable();
emitChange(event) {
this.emitChangeSource.next(event);
}

组件2 TS

console.log(this.myService.emitChange);

那么，如何在组件2.ts文件中获得实际的数据值呢？

我目前看到

ƒ (event) {
this.emitChangeSource.next(event);
}

Answer 1

您需要"订阅"；到changeEmitted$。

你可以在ngOnInit 中做

//don't forget unsubscribe!!!
ngOnInit()
{
this.myService.changeEmitted$.subscribe((res:any)=>{
console.log(res)
})
}

或者，如果只想显示结果，可以使用管道异步

您可以在构造函数中将服务声明为公共服务

constructor(public myService:MyService){}
//in html
<div *ngIf="myService.changeEmitted$|async as value">
{{value.emitValue}} - {{value.data|json}}
</div>

或者声明为私有并使用辅助变量

changeService$=this.myService.changeEmitted$
constructor(private myService:MyService){}
//in html
<div *ngIf="changeService$|async as value">
{{value.emitValue}} - {{value.data|json}}
</div>

注意：您也可以"；播放"；对于的rxjs运算符，例如过滤响应和变换以仅返回"0"；数据"；

changeService$=this.myService.changeEmitted$.pipe(
filter((res:any)=>res.emitValue=='openFunctionInSidePanel'),
map((res:any)=>res.data)
)
//then subscribe to this.changeService or use in .html `{{changeService|async}}`

注意：我添加了一个响应，因为文章在另一个答案中指出没有考虑异步管道

Answer 2

基本上，这两个组件之间应该有一个共享服务。使用服务从组件1发出值，并使用共享服务订阅组件2的值。

请参阅本文的第4种方法，该方法展示了如何在不相关的组件之间传递数据。