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

Question

我想使用 angular 将文件传递给第二个组件

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

或者通过 formData 传递

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

它不像这样工作。 我怎样才能做到这一点？ 谢谢

Answer 1

如果您想要在 angular 路由组件之间进行适当的异步导航，那么您应该考虑使用rxjs库，它由 angular 本地提供。 您可以按照以下步骤来实现：

1. 使用首选名称创建新服务。
2. 在服务中创建一个新的Subject并在您的路由组件中订阅它。
3. 在路由之前将您的文件 object 作为主题中的值发出。

Answer 2

你在这里有几个选择。 通过查询参数传递整个File object 将不起作用。 我想从技术上讲，如果您将整个文件主体作为字符串参数传递到 URL 中，它可能会起作用，但我不建议这样做。

你可以做什么：

• 使用本地存储
• 使用 Singleton 服务进行存储
• 在导航附加文件中传递File object

为了坚持您当前的设置，我建议您使用第三个选项并执行以下操作：

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

https://angular.io/guide/router

Answer 3

您可能需要考虑通过路由器传递文件 id 或文件名，然后在路由后重新加载文件。

您必须记住的是，用户可能会点击浏览器刷新按钮，在这种情况下，您需要根据 url 生成整个页面及其所有内容。