The Goal I'm Pursuing
In my Angular client app, I have two separate components. One component handles data fetching and processing from the server. My objective is to utilize the subscribe callback function to navigate to a different page where I can display processed data in the form of a blob. To be more precise, I aim to open a new tab and provide a preview of a word document using an unrelated component. Through research, I discovered that passing data between unrelated components can be achieved by utilizing a service with an RxJS subject.
The Current Outcome
Although I have written some code, I am facing an issue where the blob does not reach the preview component as intended.
Attempts Made So Far
Below is the code I have devised:
Service for sharing a Blob object
@Injectable()
export class DocPreviewService {
private blob = new BehaviorSubject<Blob | undefined>(undefined);
public share$ = this.blob.asObservable();
constructor() {}
setBlob(blob: Blob) {
this.blob.next(blob);
}
}
Function responsible for retrieving the blob from the server (first component)
showReport(selected_id: string) {
const url = this.router.serializeUrl(this.router.createUrlTree([`tools/${selected_id}/preview`]));
// Opening the page in a new tab is crucial
window.open(url, '_blank');
this.report_service.createReport(this.calc_items[selected_id]).subscribe({
next: (doc_blob: Blob) => {
{
this.doc_preview_service.setBlob(doc_blob);
}
},
error: (error: any) => {
},
})
}
Component for viewing a document (second component)
export class DocPreviewComponent implements OnChanges, AfterViewInit, OnDestroy {
doc_blob?: Blob;
@ViewChild('doc_preview') doc_preview!: ElementRef;
subscription: Subscription;
constructor(private doc_preview_service: DocPreviewService, private local_storage: LocalStorageService) {
this.subscription = this.doc_preview_service.share$.subscribe(blob => {
this.doc_blob = blob;
});
}
ngOnChanges(changes: SimpleChanges): void {}
ngAfterViewInit(): void {
if (this.doc_blob) {
doc.renderAsync(this.doc_blob, this.doc_preview.nativeElement)
.then(x => console.log("docx: finished"));
}
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
I would greatly appreciate any assistance provided. Thank you.