Angular 7 Как передать объект со страницы входа на домашнюю страницу

Question

Мы работаем над проектами угловой миграции.Для этого я создал приложение Angular 7 с логином и домашней страницей.После успешного входа в систему пользовательский компонент входа передает значение домашнему компоненту.И это огромные данные, такие как авторизация страниц, роли, бизнес-единицы [около 166 КБ].И служба была написана кем-то.

1. Я звоню в службу для проверки пользователя и службы, возвращающей данные (что означает успешный вход в систему).

2. Я используюследующие строки кода для перенаправления на домашнюю страницу с данными

   let navigationExtras : NavigationExtras = {
     queryParams : { 
       "data": JSON.stringify(data)
     }
   };
   this.route.navigate(['/home'],navigationExtras); 
   

3. На следующей странице используется для получения данных

   this.route.queryParams
     .subscribe(params => {
       this.data= JSON.parse(params["data"]);
       this.lstUserBusinessUnitDetails = this.data.lstUserBusinessUnitDetails;
     });
   

Проблема в том, что я получаю данные в URL, и когда я обновляю страницу, получаю ошибку The connection was reset.URL выглядит следующим образом: http://localhost:4211/home?data=%7B%22lstUserCompanyDetails%22:%5B%5D,%22lstU....

Пожалуйста, совет.

Answer 1

, если вы используете Angular 7.2 и пытаетесь передавать данные между маршрутами, вы можете использовать новейшую функцию, предоставляемую Angular.Перейдите по этой ссылке.

https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

Answer 2

После любого обновления страницы все компоненты проекта Angular уничтожаются и снова инициализируются, в этот момент все данные исчезают, и у вас нет никакой информации от LoginComponent

Чтобы решить эту проблему, вам нужноиспользовать SessionStorage для сохранения этих данных в браузере, и эти данные исчезнут, когда вы закроете эту страницу (не обновлять) или вы можете использовать LocalStorage, и разница между ними заключается в удалении данных SessionStorage после задержки.

для использования сеансахранилище:

• Сохранить данные

    sessionStorage.setItem('key', value);

• Получить данные

    sessionStorage.getItem('key');

Более подробную информацию о хранилище сеансов вы можете получитьпрочитайте этот документ MDN веб-документы: Window.sessionStorage