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

【问题标题】：How to share data between two components declared in lazy loaded different modules - Angular 4如何在延迟加载的不同模块中声明的两个组件之间共享数据 - Angular 4
【发布时间】：2019-02-13 11:30:25
【问题描述】：

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

例如：

 { 
     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 中获取它。

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

在 Login 和 UserProfile 模块中添加了 DataBusService 作为提供程序。
为 DataBusService 创建了单独的模块并将其导入到 Login & 用户配置文件模块。
将 DataBusService 声明为“providedIn: 'root'”。

上述解决方案均无效，因为每次都会为模块创建新的 DataBusService 实例。

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

任何帮助将不胜感激！

【问题讨论】：

如果您的组件有父子关系，请使用@input 和@output。如果您的组件有兄弟姐妹和孙子关系，请使用Services。
@ShashikantDevani 不，组件之间没有父子关系。两者都是在不同模块中声明的独立组件。
你能为此创建 stackblitz 吗？所以我可以帮你
另请参阅此链接可能对您有所帮助：angularfirebase.com/lessons/…
@ShashikantDevani 如果您在同一模块中声明了两个组件，则您提供的链接上给出的解决方案将正常工作。当您在不同的模块中声明组件并访问服务数据时，它将不起作用。原因是，每个模块都创建了它们单独的服务实例。所以我想要一种为不同模块中声明的组件创建单个服务实例的方法。

标签： angular angular5 angular2-services

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

localstroage.setItem('item_id',item);

在用户配置文件组件中

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

【讨论】：

谢谢。但我只寻求在上述场景中提供数据共享服务的解决方案。