从 angular 12 中的服务获取未定义的值

Question

我是 angular 的新手，在调用从其他组件获取值的服务后，我在变量中获取了未定义的值。

我正在尝试使用服务将文件数据从一个组件发送到另一个组件，但在接收组件中，我在函数中得到未定义的值，有人可以帮我解决这个问题吗..

1.) 从此组件的函数将文件数据作为字符串发送。

sendFile() {
    let file = this.addressDetails.value.fileSource;;
    //console.log(file);
    
    //this._sendFiles.sendFiledetails(file);
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onloadend = () => {
        resolve(reader.result)
         console.log(reader.result);
        this.stringFile = JSON.stringify(reader.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    }).then((result) => {
      this.stringFile = result;
      console.log(this.stringFile);
      
      this._sendFiles.sendFiledetails(this.stringFile);
      //this.route.navigate(['/payment']);
    });
  }

2.) 这是我服务的功能

export class SendFileAttachmentService {
  private _file = new Subject<any>();
  getFile$ = this._file.asObservable();
  sendFile: any;
  constructor() { }
  
  sendFiledetails(file: any) {
    //console.log(file);
    this._file.next(file);
    
    this.sendFile = file;
  }

  getFiles() {
    //console.log(this.sendFile);
    
    return this.sendFile;
  }
}

3.) 这是我的接收组件的函数，它试图接收文件数据

 recieveFile() {
    this.getFiles = this._sendFile.getFiles();
    let file = this.getFiles;
    console.log("files:" + this.getFiles);
    return this.getFiles;
  }

Answer 1

在接收组件上，您应该订阅 getFile$ 可观察对象，而不是调用方法 recieveFile。查看下面的示例：

@Component({ ... })
export class ReceivingComponent implements OnInit, OnDestroy {
  getFiles = null;
  sub: Subscription | null = null;

  constructor(private _sendFile: SendFileAttachmentService ) {}

  ngOnInit() {
    this.sub = this._sendFile.getFile$.subscribe(files => {
      // When this code gets executed it should have the value
      // emitted from the emitting component.
      this.getFiles = files;
    });
  }

  ngOnDestroy() {
    // Lets not forget to unsubscribe the subscription we made above.
    this.sub.unsubscribe();
    this.sub = null;
  }
}

查看此 StackBlitz 以获得完整的工作演示。

从 angular 12 中的服务获取未定义的值

Getting undefined value from service in angular 12

rxjs

angular

angular12