如何将图像base64 url 传递给同级组件

Question

我有一个可以完美呈现传单地图的组件，我可以在上面绘制一些多边形。我添加了htmlToImage库以截取我所绘制内容的屏幕截图，如果将其作为子元素附加到同一组件中，它将很好地呈现。但是我喜欢将该图像源传递给下一个组件（同级组件）并在其上执行其他操作。我试图实现一种服务，我的第一个组件将dataURL作为字符串变量写入，而第二个组件获取该变量，并使用它来显示该存储路径中的图像。第一个组件使用router-link方法作为同级组件路由到下一个组件（从home / map到home / image），但它不会显示图像，只是console.log（path）是空字符串，即我最初在服务中初始化的内容。我在做什么错？

我正在使用Angular 9并在本地主机上运行。到目前为止，这是我尝试过的：

map.component.ts

// Map related methods ....
// ....

getScreenshot() {
   htmlToImage.toPng(document.getElementById('map'))
      .then((dataUrl) => {
        this.projectService.setProject('image', dataUrl);
      })
      .catch((error) => {
        console.error('oops, something went wrong!', error);
      });
}

screenshot.component.ts

const path = this.projectService.getProject().image;

constructr(private projectService: ProjectService) {}

screenshot.component.html

<div class="row content">
    <img [src]="path" alt="map" >
</div>

project.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ProjectService {

  private project = {
    title: '',
    image: '',

  };

  getProject() {
    return this.project;
  }

  setProject(option: any, value: any) {
    this.project[option] = value;
  }

}

app-routing.module.ts

export const appRoutes: Routes = [
  {
    path: 'home', component: AppComponent,
    children: [
      { path: 'map', component: MapComponent },
      { path: 'image', component: ScreenshotComponent },
    ]
  },
];

我已经在StackBlitz上发布了我的代码。

Answer 1

我复制了该问题并修改了一些代码。我使用带有主题的服务，以便使用可观察对象在同级组件之间共享信息。