从角度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$observable，而不是调用方法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完整的工作演示。