Angular 2刷新有关本地存储的值更改的视图

Question

我有一个导航栏，可以打印出用户的姓名和姓氏。这两个变量均取自组件init上的本地存储。我有一个模态，在模态中，我可以更改已登录用户的名称和姓氏，然后将它们再次放入本地存储中。如果成功更改它们，我想用新名称和姓氏更新导航栏。

模态和导航栏是两个不同的组件。

我怎样才能做到这一点？

解决方案1：我正在考虑在成功执行新数据（名称和姓氏）过帐后手动修改变量。我可以从模态中修改另一个组件（导航栏）的变量吗？

解决方案2：调用location.reload强制使用本地存储中的新数据自动更新所有视图。

解决方案3：使用商店

Answer 1

创建用于获取/设置本地存储的包装程序服务，该服务也会在设置时发出。例如，this.storageService.setItem('foo', 'bar')导航栏已订阅时，模态调用this.storageService.changes$。当有事件写入存储时会发出一个事件，但该事件只会在同一域的其他窗口中发出。