将数据断言到订阅方法中的变量后，一旦方法完成，数据就会消失

Question

我正在使用库signature_pad，如果我画一条线，方法toDataURL((会返回一个字符串。我有一个消息服务，我有一个在不相关的 Angular 组件之间发送字符串的方法。这个想法是将数据字符串分配给 img src。当我将以前的数据URL硬编码到我的PdfPageComponent中时，我绘制的线条就会出现。但是，当我尝试使用消息服务发送数据时，出现问题。当我控制台记录消息时，我可以看到字符串已正确发送。问题是当我尝试将该数据分配给变量 signatureImg 时。当我分配它时，控制台.log((再次告诉我它很好。但是当我点击我的onShowSignatureButtonClick((时，字符串消失了，我得到了一个未定义的。我意识到这可能是可观察量和"等待"期的问题。我已经用谷歌搜索了一下，并尝试了我在这里找到的很多东西，但似乎没有任何效果。

这是PDF页面，在这里签名Img字符串应该是我从消息传递服务中获得的字符串

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
}
}

这是我的消息服务，在这里我得到了负责发送字符串的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);

这可能是因为您的主体在您向其发送值后订阅了它：如果是这种情况，那么行为主体将解决它。如果没有，那么请提供一个最低限度的、可重现的和可验证的例子。