如何在延迟加载的不同模块中声明的两个组件之间共享数据 - Angular 4

Question

我想实现一种使用两个组件之间的公共服务来共享数据的方法。组件在两个不同的模块中声明，以惰性方式加载。

例如：

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

这是我的情景。我在登录时获取用户个人资料相关数据。我想在User Profile组件中重用这些细节。我不想发出API请求来获取详细信息，因为我在Login响应中返回了所需的详细信息。

我有一个公共数据服务，我在其中存储详细信息。

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

  constructor() {
  }

  get userDetail() {
    return this._userDetail;
  }

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

在这种情况下，我从LoginComponent设置_userDetail并在UserProfileComponent中获取它。

以下是我尝试过的解决方案。

1. 在Login和UserProfile模块中添加了DataBusService作为提供程序。
2. 为DataBusService创建了单独的模块，并将其导入Login＆UserProfile模块。
3. 将DataBusService声明为“providedIn：'root'”。

上述解决方案都不起作用，因为每次为模块创建新的DataBusService实例。

我想创建一个DataBusService的Singleton实例，并在Login和UserProfile组件中使用它。

任何帮助，将不胜感激！

Answer 1

我建议您应该使用cookie或localstorage来存储数据，否则您将丢失页面重新加载或服务实例中的数据，例如。在LoginComponent中使用localstorage

localstroage.setItem('item_id',item);

在UserProfileComponent中

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

Answer 2

如果您希望自己的服务是单身，请在应用的根模块中定义并提供。