Angular 两个组件之间通过服务进行通信不';行不通
我需要帮助。我想通过共享服务将一个变量从一个组件发送到另一个组件。我受到了启发,但在接收器组件中,“nevim”值仍然没有定义,我不知道为什么。非常感谢 编辑:好的,我发现了问题,是发送方和接收方组件没有使用相同的服务实例 因此,如果您在自己的项目中尝试此方法,它应该会起作用。 服务:Angular 两个组件之间通过服务进行通信不';行不通,angular,angular-services,Angular,Angular Services,我需要帮助。我想通过共享服务将一个变量从一个组件发送到另一个组件。我受到了启发,但在接收器组件中,“nevim”值仍然没有定义,我不知道为什么。非常感谢 编辑:好的,我发现了问题,是发送方和接收方组件没有使用相同的服务实例 因此,如果您在自己的项目中尝试此方法,它应该会起作用。 服务: customNevim$: Observable<string>; private customNevimSubject = new Subject<string>(); constru
customNevim$: Observable<string>;
private customNevimSubject = new Subject<string>();
constructor() {
this.customNevim$ = this.customNevimSubject.asObservable();
}
customNevim(data) {
this.customNevimSubject.next(data);
}
message2: string = "test";
public constructor( private myService: MyService) {
this.myService.customNevim(this.message2);
}
nevim: string;
public constructor( private myService: MyService) {
this.myService.customNevim$.subscribe((data) => {
this.nevim = data;
//after I try console.log "this.nevim" it still shows it as undefined
}
}
接收器组件:
customNevim$: Observable<string>;
private customNevimSubject = new Subject<string>();
constructor() {
this.customNevim$ = this.customNevimSubject.asObservable();
}
customNevim(data) {
this.customNevimSubject.next(data);
}
message2: string = "test";
public constructor( private myService: MyService) {
this.myService.customNevim(this.message2);
}
nevim: string;
public constructor( private myService: MyService) {
this.myService.customNevim$.subscribe((data) => {
this.nevim = data;
//after I try console.log "this.nevim" it still shows it as undefined
}
}
试试这个。。改变
this.customNevim$ = this.customNevimSubject.asObservable();
在构造函数中为空,并且您的可观测值应为
非rxjs6-->this.customNevim$=Observable.from(this.customNevim主题)代码>
导入“rxjs/add/observable/from”代码>
Rxjs6-->this.customNevim$=from(this.customNevim主题)代码>
Rrxjs6-->从“rxjs”从import{from}导入代码>
正在更新您的示例
服务
接收元件
试试这个代码
服务:
customNevim$: Observable<string>;
private customNevimSubject = new Subject<string>();
constructor() {
this.customNevim$ = this.customNevimSubject.asObservable();
}
customNevim(data) {
this.customNevimSubject.next(data);
}
接收器组件:
nevim: string;
public constructor( private myService: MyService) {
}
ngOnInit() {
this.myService.customNevim$.subscribe((data) => {
this.nevim = data;
});
}
发布一个完整的最小示例,如stackblitz,再现问题。登录的地点和时间、调用服务的地点和时间以及创建组件的地点和时间是一个关键信息。我应该在哪里使用sendMsg()方法?您希望在哪里触发msg功能,以便观察者可以接收它。或者您可以将该逻辑移动到ngOnInit()。我不知道应该将其放置在何处,我只想让receiver组件中的“nevim”在sender组件中具有“message2”的值。尝试了它,但仍然是相同的输出:(sender组件工作,因为当我尝试记录“数据”时)在服务方法customNevim中,它显示了正确的值,但在receiver中仍然未定义。Dis服务是单例的,并在app.module中声明?非RXJS工作,但输出仍然未定义,而RXJS导入显示错误“尚未导出成员“from”它们都是rxjs,一个是rxjs6如果您使用的angular 6没有rxjs compat,那么您必须通过导入“rxjs/add/observable/from”从中导入;同时从构造函数中删除组件中的所有代码并将其移动到ngOnInit()中。您不应该在构造函数中包含任何内容的服务。另外,console记录数据,而不是this.nevim,以查看您是否实际获取了数据。尝试了它,但仍然相同,并且“console.log(数据)”在接收器组件中甚至没有触发,因此问题一定存在。在服务中添加日志,查看您是否在组件/服务中获得正确的数据。在更新可观察对象之前。此外,您可能未定义,因为您使用的主题在您通过发送者组件更新之前不会发送任何内容首先是nt,然后通过receiver组件进行监听。是的,正如我在其他评论中所说,当我尝试在服务中登录customNevim时,我得到了正确的值,即“test”。所以这可能不是问题所在。请您更新答案,我如何通过发送方(然后通过接收方)进行更新?
nevim: string;
public constructor( private myService: MyService) {
}
ngOnInit() {
this.myService.customNevim$.subscribe((data) => {
this.nevim = data;
});
}