在 angular 中延迟加载服务数据

Question

I have created this service

import { Injectable } from '@angular/core';
declare var webkitSpeechRecognition: any;

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

  recognition =  new webkitSpeechRecognition();
  isListening = false;
  public text = '';
  public tempWords : any;
  public transcript_arr =[];
  public confidence_arr =[];
  public temp_trans ='';


  constructor() { }
  init() {
    this.recognition.continuous = true;
    this.recognition.interimResults = false;
    this.recognition.maxAlternatives = 1;
    this.recognition.lang = 'en-US';
    this.startListening();
  }
  startListening() {
    this.recognition.addEventListener('result', (e:any) => {
      let last = e.results.length - 1;
      this.temp_trans = e.results[last][0].transcript; 
      let confidence = e.results[last][0].confidence; 
      this.confidence_arr.push(confidence);
      this.transcript_arr.push(this.temp_trans); 
    });
  }

  start() {
    if(this.isListening==false)
    {
      this.isListening = true;
      try{
      this.recognition.start();
      }
      catch(e){

      }
      
    }
    
    this.recognition.addEventListener('end', (condition:any) => {
      if (!this.isListening) {
       this.recognition.stop();
      } else {
        this.wordConcat();
        try{
        this.recognition.start();
        }
        catch(e)
        {

        }
      }
    });
  }
  stopListening() {
    this.recognition.removeEventListener('result',null);
  }
  stop() {
    this.isListening = false;
    this.wordConcat();
    this.recognition.stop();
  }
  reinit()
  { 
    this.transcript_arr=[];
    this.confidence_arr=[];
    this.tempWords='';
    this.text='';
    this.temp_trans='';
  }
  wordConcat() {
    this.text = this.text + ' ' + this.tempWords + '.';
    this.tempWords = '';
  }
}

Example Link

using this transcript array this.service.transcript_arr in .ts file but the last processing of words are returned with some delay after this service has been stopped, but i want if the output is still pending or the component for showing result is already loaded then it should show the transcript result also

Answer 1

What about making you transcript_arr to an observable - that way you always get the latest value even if it arrives with a delay. I am using ReplaySubject with bufferSize of 1 here so that when we subscribe, we only get the last value when we have something to show.

public transcript_arr = new ReplaySubject<[]>(1);


  startListening() {
    this.recognition.addEventListener('result', (e:any) => {
      let last = e.results.length - 1;
      this.temp_trans = e.results[last][0].transcript; 
      let confidence = e.results[last][0].confidence; 
      this.confidence_arr.push(confidence);
      this.transcript_arr.next(this.temp_trans); 
    });
  }



  reinit()
  { 
    this.transcript_arr.next([]);
    this.confidence_arr=[];
    this.tempWords='';
    this.text='';
    this.temp_trans='';
  }

And In your component use it like so:

lastestTranscript$: Observable<[]>;

this.lastestTranscript$ = this.service.transcript_arr.pipe(data => {return data;})

And show it in the html like so:

<div>{{lastestTranscript$ | async}} </div>