如何将图像base64 url 传递到另一个组件

Question

我有一个可以完美呈现传单地图的组件，我可以在上面绘制一些多边形。我添加了htmlToImage库以截取我所绘制内容的屏幕截图，并且我喜欢将该图像传递给下一个组件并在其上进行其他操作。我试图实现一种服务，我的第一个组件将dataURL作为字符串变量写入，而第二个组件获取该变量并使用它来显示image.src中的图像。在第一个组件中，我将dataURL正确保存在服务上，并且当我从服务中记录该数据时，它会正常打印。但是，当我仅从第二个组件上的变量获取console.log（）时，我得到了空字符串。我在做什么错？

我正在使用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

ngOnInit() {
// console.log(this.projectService.getProject().image);
}

getImage() {
    const image = new Image();
    image.src = this.projectService.getProject().image;
    return image.src;
  }

screenshot.component.html

<div class="row content">
    <img src="getImage()" 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;
  }

}

Answer 1

我复制了该问题并修改了一些代码。我使用@Input而不是使用服务，以便将数据从父组件传递到子组件。

有一些方法可以在组件之间传递数据，在这种情况下，我使用@Input，但是您可以继续使用服务。

您可以看到3秒钟后如何截取屏幕快照并将图像从应用程序组件传递到屏幕快照组件。

我的解决方案在这里：https://stackblitz.com/edit/angular-fmlszi

父组件

app.component.ts

... code omitted
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ... code omitted

  path: string;

  ngOnInit() {
    setTimeout(() => {
      // After 3 secs execute getScreenshot method!
      this.getScreenshot();
    }, 3000);
  }

  ... code omitted

  getScreenshot() {
    htmlToImage
      .toPng(document.getElementById("map"))
      .then(dataUrl => {
        // save dataUrl into path var
        this.path = dataUrl;
      })
      .catch(error => {
        console.error("oops, something went wrong!", error);
      });
  }
}

app.component.html

<div #map id="map" class="google-map"> </div>
<app-screenshot [path]="path"></app-screenshot>

子组件

screenshot.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-screenshot',
  templateUrl: './screenshot.component.html'
})
export class ScreenshotComponent {
  @Input() path: string;
}

screenshot.component.html

<div *ngIf="path; else noPathTemplate">
  <img style="width: 200px; height: 200px; border: 1px solid gray;" [src]="path" alt="map" >
</div>
<ng-template #noPathTemplate>
  I don't have any path yet
</ng-template>