передать файл между компонентами в 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

Если вам нужна правильная асинхронная c навигация между angular компонентами маршрута, вам следует подумать об использовании библиотеки rxjs, которая предоставляется angular изначально. Для этого вы можете выполнить следующие шаги:

1. Создайте новую услугу с предпочтительным именем.
2. Создайте новую Subject в услуге и подпишитесь на нее в своем компоненте, который маршрутизируется.
3. Перед маршрутизацией передайте ваш файловый объект как значение в теме.

Answer 2

У вас есть несколько вариантов. Передача всего объекта File через параметры запроса не сработает. Я полагаю, что технически это могло бы сработать, если бы вы передали все тело файла в виде строкового аргумента в URL-адресе, но я бы не рекомендовал это.

Что вы можете сделать:

• Использовать локальное хранилище
• Использовать одноэлементную службу для хранения
• Передать объект File в дополнительных элементах навигации

Чтобы придерживаться текущей настройки, Я бы рекомендовал использовать третий вариант и сделать что-то вроде этого:

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

https://angular.io/guide/router

Answer 3

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

Следует помнить, что это возможно для пользователя чтобы нажать кнопку браузера refre sh, и в этом случае вам нужно сгенерировать всю страницу и все ее содержимое на основе URL-адреса.