Angular: хотите сохранить индикатор выполнения, если перенаправляет на другую страницу

Question

В Angular я хочу загрузить большой файл и показать индикатор выполнения в области нижнего колонтитула. Я предполагаю, что я могу сделать это с помощью @input или @output. Но мое задание немного сложное, и я не могу найти решение для этого. Потому что я должен поддерживать индикатор выполнения (то есть, он будет отображать ход загрузки файла), даже если пользователь нажмет на другое меню, как о нас, или на страницу контактов. действительно ли это возможно в реальной жизни?

Answer 1

Вы можете создать компонент, который будет обрабатывать загрузку файлов, и поместить его в компонент root (вне маршрутизатора-розетки). Таким образом, если пользователь перейдет на другую страницу, компонент загрузки файлов будет по-прежнему активен.

В свой компонент приложения добавьте компонент загрузки файлов после выхода из маршрутизатора.

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

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

Здесь stackblitz exapmle

Обратите внимание, что в этом примере я использовал setInterval просто для имитации загрузки файла.