在 Angular 中的组件之间传递文件

Question

I want to pass a file to a second component with angular

this.router.navigate(['/secondComponent'], { queryParams: { file: File}})

Or pass it via formData

 var formData: any = new FormData();
 formData.append("file", file);
 this.router.navigate(['/secondComponent'], { queryParams: { file: File}})

It doesn't work like this. How can I do this? Thanks

Answer 1

If you want a proper async navigation between angular route components then you should consider using rxjs library which is provided by angular natively. You can follow the following steps to achieve that:

1. Create a new service with a preferred name.
2. Create a new Subject in the service and subscribe it in your component that is routed.
3. Emit your file object as a value in the subject before routing.

Answer 2

You've got a few options here. Passing the entire File object via query params won't work. I guess technically, it could work if you were to pass the entire file body as a string argument in the URL, but I wouldn't recommend that.

What you can do:

• Use local storage
• Use a Singleton Service for storage purposes
• Pass the File object in the navigation extras

To stick with your current setup, I would recommend going with the 3rd option and do something like this:

this.router.navigate(['/some-route'], {state: {data: myFile}});

https://angular.io/guide/router

Answer 3

you might want to consider passing the file id, or file name through the router and then reloading the file once you have routed.

The thing you have to keep in mind, is it's possible for a user to hit the browser refresh button, in which case you need to generate the entire page and all its contents based on the url.