После передачи данных переменной в метод подписки, данные исчезают после завершения метода

Question

Я использую библиотеку signature_pad, и если я рисую линию, метод toDataURL () возвращает строку.У меня есть MessagingService, где у меня есть метод для отправки строки между несвязанными угловыми компонентами.Идея состоит в том, чтобы назначить строку данных для img src.Когда я жестко кодирую предыдущий dataURL в свой PdfPageComponent, появляется линия, которую я нарисовал.Однако, когда я пытаюсь отправить данные с моим messageService, что-то идет не так.Когда я консоль журнала сообщение, я вижу, что строка передается правильно.Проблема в том, когда я пытаюсь присвоить эти данные переменной signatureImg.Еще раз, когда я назначаю это, console.log () говорит мне, что это хорошо.Но когда я нажимаю на свой onShowSignatureButtonClick (), строка исчезает, и я получаю неопределенное.Я понимаю, что это, вероятно, проблема с Observables и периодом ожидания.Я уже погуглил и попробовал кучу вещей, которые нашел здесь, но, похоже, ничего не работает.

Это страница 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);

Это может быть потому, что ваш субъект подписан после , вы отправляете ему значение: если это так, тогда субъект поведенияразрешит это.Если нет, просьба привести минимальный, воспроизводимый и проверяемый пример.