Avoid report re embedding on route change in Angular

Hello,

I have an angular component containing my html container on which the embedding is going to happen. Now on route change, this component is getting destroyed and so does its html container containing the report. When user is getting back to the report route, the component is initializing again and re embedding from scratch the report, removing any changes made from the user to the report.

I would like to know if there are means to make the report survive it component destruction. I thought about means like making the embedding process happening in a service being called from the component displaying the report. Issue is I do not see how to set that practically and what exactly should the service return : the html container or the result of pbi.embed() method?

This is currently the method called from my service onInit of my report viewer component:

this.powerbiService
      .getReportEmbedInfoById()
      .subscribe(async (data) => {
        if (this.pbiContainerElement) {
          const embedConfig = this.powerbiService.buildEmbedConfig(data);
          powerbi.reset(this.pbiContainerElement);
          this.myReport = powerbi.embed(this.pbiContainerElement, embedConfig);
          // report.off removes all event handlers for a specific event
          this.myReport.off('loaded');
          // report.on will add an event handler
          this.myReport.on('loaded', () => {
            this.powerbiService.handleTokenExpiration(this.myReport);
            loadedResolve();
            // this.myReport.off("loaded");
          });
      });

 Thanks for any support.