Question

我正在使用单例服务来存储共享数据。该服务的代码如下：

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

如果在providers数组中添加服务，则该组件及其所有子组件将获得该服务的单独实例。即，它将不再是单例服务。从提供程序中删除它，它将起作用。

Angular 9中的Singleton服务无法正常工作

1 个答案: