Angular：如果重定向到另一个页面，希望保持进度栏处于活动状态

Question

在Angular中，我要上传大文件并在页脚区域显示进度栏。我假设我可以通过@input或@output完成此操作。但是我的任务有点困难，因此我无法解决。因为，即使用户单击其他菜单（例如关于我们或联系页面），我也必须保持进度条处于活动状态（即，它将显示文件上传的进度）。在现实生活中这真的有可能吗？

Answer 1

您可以创建将处理文件上传的组件，并将其放在根（路由器出口之外）组件中。因此，如果用户导航到另一个页面，则文件上传组件仍将处于活动状态。

在您的应用程序组件中，在路由器出口之后添加文件上传组件。

<router-outlet name="popup"></router-outlet>

<app-file-upload></app-file-upload>

这里是stackblitz例子

在此示例中，请注意，我仅使用setInterval来模仿文件上传。