如何在延迟加载的不同模块中声明的两个组件之间共享数据-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;
  }
}

在这种情况下，我从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中

localstroage.setItem('item_id',item);

在UserProfileComponent中

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

Answer 2

如果您希望服务为单例，请在应用的根模块中定义并提供它。