Синглтон Сервис в Angular 9 не работает

Question

Я использую сервис Singleton для хранения общих данных. Код для услуги ниже:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UploadedFileService {
  private upLoadedFile: File;
  constructor() { }
  public setUploadedFile(file: File) : void {
    this.upLoadedFile = file;
  }
  public getUploadedFile(): File {
    return this.upLoadedFile;
  }
}

В классе ниже я устанавливаю файл upLoadedFile. Код ниже:

import { Component, OnInit } from '@angular/core';
import { UploadedFileService } from '../uploaded-file.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-upload-file',
  templateUrl: './upload-file.component.html',
  styleUrls: ['./upload-file.component.css']
})
export class UploadFileComponent implements OnInit {

  constructor(private uploadedFileService: UploadedFileService, private router: Router) { }

  ngOnInit() {
  }
  files: any = [];
  file: File;

  private emptyArray() {
    this.files.splice(0, this.files.length);
  }

  uploadFile(event) {
    this.emptyArray();
    for (let index = 0; index < event.length; index++) {
      const element = event[index];
      if(element instanceof File) {
      this.files.push(element.name);
      this.file = element;
      }
  }
  this.uploadedFileService.setUploadedFile(this.file); 
  this.router.navigate(['preview'])
}
}

Когда я пытаюсь получить доступ к upLoadedFile в моем компоненте предварительного просмотра (код ниже), я получаю неопределенное значение:

import {Component, Input, ViewEncapsulation, OnInit} from '@angular/core';
import {read, utils} from 'xlsx';
import {FileUtilsService} from '../file-utils.service';
import { UploadedFileService } from '../uploaded-file.service';

@Component({
  selector: 'app-preview-file',
  templateUrl: './preview-file.component.html',
  styleUrls: ['./preview-file.component.css'],
  providers: [FileUtilsService, UploadedFileService]
})
export class PreviewFileComponent implements OnInit{
  uploadedFile: File;
  constructor(private fileUtilService: FileUtilsService, private uploadedFileService: UploadedFileService) {
  }
  ngOnInit() {
  // The uploadedFileService.getUploadedFile() returns undefined
    this.uploadedFile = this.uploadedFileService.getUploadedFile();
    this.preview_file();
  }
  preview_file() {
    const reader = new FileReader();
    reader.readAsArrayBuffer(this.uploadedFile);
    reader.onload = function(e: any) {
      const data = new Uint8Array(e.target.result);
      const arr = new Array();
      for (let i = 0; i !== data.length; ++i) {
        arr[i] = String.fromCharCode(data[i]);
      }
      const bstr = arr.join('');
      const workbook = read(bstr, {type: 'binary'});
      const first_sheet_name = workbook.SheetNames[0];
      const container = document.getElementById('preview_id');
      container.innerHTML =  utils.sheet_to_html(workbook.Sheets[first_sheet_name], {});
    };
    }
  }

Я все перепробовал. Я не уверен, где проблема. Кажется, что загруженный файл обновляется в службе, но когда я пытаюсь получить его из службы в модуле предварительного просмотра, он всегда возвращает неопределенное значение.

Answer 1

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