Angular 将方法传递给服务

Question

我正在使用 Angular 12，并且我有一个获取元素屏幕截图的方法。它有效，但我想从服务中调用它。

代码如下：

import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

...

takesshotOfElement(elementId: any) {
    const element = document.getElementById(elementId) as HTMLCanvasElement;
    html2canvas(element).then((canvas) => {
      canvas.toBlob((blob: any) => {
        saveAs(blob, "filename.png");
      });
    });    
}

如何将此方法放入服务中，以便调用服务并使方法更简洁？

Answer 1

您可以创建一个服务并添加此方法。现在，屏幕截图的处理可能需要时间，并且您不希望主线程等待它，因此将其设置为异步并 return 方法中的承诺。

takesshotOfElement(elementId: any) {
    const element = document.getElementById(elementId) as HTMLCanvasElement;

    return new Promise( async (resolve, reject) => {
          try {
             const canvas = await html2canvas(element);
                   canvas.toBlob((blob: any) => {
                   saveAs(blob, "filename.png");
                   // once the things are done
                   resolve('Blob is completed');
             });  
          } catch (e){
             reject(e);
          }
    })   
}

要调用的组件，可以使用async/await或then/catch。这样，每当您调用此方法时，它都会根据对快照所做的处理来更新内容。

Answer 2

我在下面创建了一个示例服务片段：

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class DummyService {

  constructor(
    @Inject(DOCUMENT) private document
  ) { }

  takesshotOfElement(elementId: any) {
    const element = this.document.getElementById(elementId) as HTMLCanvasElement;
    html2canvas(element).then((canvas) => {
      canvas.toBlob((blob: any) => {
        saveAs(blob, "filename.png");
      });
    });
  }
}

您可以在组件中调用此服务，如下所示：

constructor(
    private serivce: DummyService
  ) {

  }

  ngOnInit() { //or in any method you want
    this.serivce.takesshotOfElement('test');
  }

Angular 将方法传递给服务

Angular pass a method to a service

angular

angular12