I am facing a challenge in using a service to enable communication between two components that are not directly related. I am unsure about how to utilize @Injectable and providedIn, which makes me think that the issue may lie there. However, everything I find online suggests that my implementation is correct. Due to the extensive length of my code files, which are nearly 1000 lines each, I have excluded a significant portion of the code. Apologies for any missing details, as I aimed to avoid including all those lines.
Below is the content of the service file where I store the data:
emailService.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({providedIn: "root"})
export class EmailFormatService {
private videoMessage = new BehaviorSubject<string>("False");
public message = this.videoMessage;
public setVideoMessage(message: string) {
console.log("set video");
this.videoMessage.next(message);
}
public getVideoMessage() {
return this.videoMessage;
}
}
I use the setVideoMessage and getVideoMessage functions to manipulate the data. The parent file is where I attempt to modify the data within the service:
parentFile.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
...
import { MailConfigService } from './mail-config.service';
const CONTEXT = 'MailAddInService';
@Injectable({ providedIn: 'root' })
export class Parent {
public constructor(
private _emailService: EmailFormatService,
) {}
public message?: string;
public openDialogWindow(
event: OpenDialogEvent | undefined,
route: string,
message?: string,
) {
this._emailService.setVideoMessage("hello");
Office.context.ui.displayDialogAsync(
`${this._mailConfigService.environment.verbMail.addInUrl}/index.html#/${route}`,
);
}
}
The child file is where I aim to retrieve the data. Here, the data always returns the value "False".
childFile.ts
public message!: string;
public constructor(
private _emailService: EmailFormatService,
) {
this._emailService.getVideoMessage().subscribe(vidMessage => {
this.message = vidMessage;
});
}
childFile.html
<div>
"Hi"
{{message}}
</div>
The problem I am encountering is that even after setting the video message, the getVideoMessage still returns "False". It seems like it is accessing a different instance of the service.