Question

我正在使用库signature_pad，如果我画一条线，则toDataURL（）方法会返回一个字符串。我有一个MessagingService，其中有一个在不相关的Angular组件之间发送字符串的方法。想法是将数据字符串分配给img src。当我将以前的dataURL硬编码到我的PdfPageComponent中时，将显示我绘制的行。但是，当我尝试通过messageService发送数据时，出现了问题。当我控制台记录消息时，我可以看到字符串已正确发送。问题是当我尝试将数据分配给变量signatureImg时。再一次，当我分配它时，console.log（）告诉我这很好。但是，当我单击onShowSignatureButtonClick（）时，字符串消失了，并且得到了未定义的字符串。我意识到这可能与Observables和“等待”期有关。我已经在Google上搜索了一下，并尝试了一些我在这里找到的东西，但是似乎没有任何效果。

这是PDF页面，在这里，signatureImg字符串应该是我从MessagingService获取的字符串

import { Component, OnInit, SimpleChanges, OnChanges } from '@angular/core';
import { MessagingService } from '../messaging.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-pdf-page',
  templateUrl: './pdf-page.component.html',
  styleUrls: ['./pdf-page.component.scss']
})
export class PdfPageComponent implements OnInit {

  signatureImg: string;
  constructor(private _messaging: MessagingService) { }

  ngOnInit() {
    this._messaging.signatureDataUrl$
      .subscribe((message) => {
        this.signatureImg = message;
        // console.log(this.signatureImg, "signatureImg in subscribe onint");
      });
  }

  onShowSignatureButtonClick() {
    console.log(this.signatureImg, "signatureImg"); //Gives undefined
  }
}

这是我的MessagingService，在这里我得到了sendDataUrl（），它负责发送字符串。

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

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

  private signatureDataUrlSource = new Subject<string>();
  signatureDataUrl$ = this.signatureDataUrlSource.asObservable();

  constructor() { }

  sendDataUrl(dataUrl: string) {
    return this.signatureDataUrlSource.next(dataUrl);
  }

}

这是可以在页面上使用signature_pad库绘制内容的页面。

import { Component, OnInit, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Router } from '@angular/router'
import { MessagingService } from '../messaging.service';

@Component({
  selector: 'app-sign-page',
  templateUrl: './sign-page.component.html',
  styleUrls: ['./sign-page.component.scss']
})
export class SignPageComponent implements OnInit {

  @ViewChild(SignaturePad, {static: false}) 
  signaturePad: SignaturePad
  signatureImg: any;

  private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300,
  };
  constructor(private router: Router, private _messaging: MessagingService) { }

  ngOnInit() {
  }

  confirmSignature(){
    this.signatureImg = (this.signaturePad.toDataURL())
    this._messaging.sendDataUrl(this.signaturePad.toDataURL().toString());
    this.router.navigateByUrl("/pdfpage");
}

//Rest of the code

Answer 1

private signatureDataUrlSource = new Subject<string>();

尝试使用行为主题

private signatureDataUrlSource = new BehaviorSubject<string>(undefined);

可能是因为您在之后预订了您的主题，所以您向其发送了一个值：如果是这种情况，那么行为主题将解决该问题。如果没有，请提供一个最小的，可复制的和可验证的示例。

将数据关联到订阅方法中的变量后，一旦方法完成，数据就消失了

1 个答案: