Как обмениваться данными между двумя компонентами, объявленными в лениво загруженных разных модулях - Angular 4

Question

Я хочу реализовать способ обмена данными с использованием общего сервиса между двумя компонентами. Компоненты объявлены в двух разных модулях, которые загружаются ленивым образом.

Например:

 { 
     path: 'user-profile', 
     loadChildren:'./user-profile/user-profile.module#UserProfileModule
 },
 { 
     path: 'login', 
     loadChildren:'./login/login.module#LoginModule',
 },

Вот мой сценарий. Я получаю данные о профиле пользователя при входе в систему. Я хочу повторно использовать эти детали в компоненте профиля пользователя. Я не хочу делать запрос API для получения подробной информации, так как я возвращаю необходимую информацию в ответе на логин.

У меня есть общая служба данных, в которой я храню детали.

@Injectable()
export class DataBusService {
public _userDetail:any = [];

  constructor() {
  }

  get userDetail() {
    return this._userDetail;
  }

  set userProfile(userDetail:UserDetail){
    _userDetail= userDetail;
  }
}

В этом случае я устанавливаю _userDetail из LoginComponent и получаю его в UserProfileComponent.

Ниже приведены решения, которые я попробовал.

1. Добавлен DataBusService в качестве поставщика в модулях Login и UserProfile.
2. Создал отдельный модуль для DataBusService и импортировал его в Login & Модули UserProfile.
3. Объявлено, что DataBusService «предоставлен в:« root »».

Ни одно из приведенных выше решений не работает, поскольку каждый раз для модуля создается новый экземпляр DataBusService.

Я хочу создать экземпляр DataBusService для Singleton и использовать его в компонентах Login и UserProfile.

Любая помощь будет принята с благодарностью!

Answer 1

Если вы хотите, чтобы ваш сервис был одноэлементным, определите и предоставьте его в корневом модуле вашего приложения.

Answer 2

Я предлагаю вам использовать cookie или localalstorage для хранения данных, иначе вы потеряете данные при перезагрузке страницы или экземпляре службы например. используя localalstorage в LoginComponent

localstroage.setItem('item_id',item);

в UserProfileComponent

var data =localstorage.getitem('item_id');