在角度组件之间共享文件数据

Question

我使用一个反应式表单来捕获用户使用组件的一些输入和文件。组件的ts和html页面如下

import {  Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-import-file',
templateUrl: './import-file.component.html',
styleUrls: ['./import-file.component.css']
})
export class ImportFileComponent implements OnInit {
orderImportForm: FormGroup; 
public importFile: File;
constructor(private router: Router, private route: ActivatedRoute,private fb: FormBuilder) {
}
getfile(e: any) {
const fileList: FileList = e.target.files;
this.importFile = fileList[0]; 
}
ngOnInit(): void { 
this.orderImportForm = this.fb.group({
yourReferenceNumber: [''],
orderType: ['']
}); 
}
onSubmit() {
console.log(this.importFile); // this will give you the file    
console.log(this.orderImportForm.value);        
if (this.importFile?.type=="pdf") {
this.router.navigate(['../component1'], { relativeTo: this.route });
}
else {
this.router.navigate(['../component2'], { relativeTo: this.route });      
}
}
} 

// HTML 

<form [formGroup]="orderImportForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-sm-12 col-lg-6">
<h2>Import a Purchase Order</h2>
<div class="bg-light card">
<div class="card-body">
<fieldset class="form-group">
<legend>Upload Reference No</legend>
<div class="form-group">
<input type="text" class="form-control" formControlName="yourReferenceNumber">
</div>
</fieldset>
<fieldset class="form-group">
<legend>CSV Excel Or PDF File</legend>
<div class="form-group">
<input type="file" (change)="getfile($event)" class="form-control-file" />
</div>
</fieldset>
<fieldset class="form-group">
<legend>Upload Type?</legend>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="orderType" formControlName="orderType" value="1" />
Instant
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="orderType" formControlName="orderType" value="2" />
Later
</label>
</div>
</fieldset>
</div>
</div>
</div>   
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">
<p class="my-5">
<button class="btn btn-primary" type="submit">Submit</button>
</p>     
</div>
</div>
</form>

在表单提交时，文件和表单元素的值会被正确捕获。作为下一步，我必须根据文件类型加载另一个组件(如果上传的pdf文件显示组件1，否则显示组件2(

在这些组件中，我必须读取文件内容并进行进一步处理。如何在其他组件上读取importFile的内容？

Answer 1

这个问题可能有不止一个解决方案，但在阅读您的问题时，我正在考虑创建一个服务。与组件不同，服务是可注入的，这意味着多个其他组件可以使用服务的内容。

我会在这个服务中创建一个Observable，你可以向它发出，例如importFile或任何你想要的东西。您可以从另一个组件导入此服务并订阅observable。然后，一旦一个值被发射到它上，你就可以捕捉它，并以你想要的任何方式处理它。

在有两个可能的组件的情况下，您可能希望对*ngIf和async pipe做些什么。

与可观察性相关的一切都可以在这里找到：https://rxjs.dev/guide/observable剩下的只是原生的Angular东西。