Angular 2 刷新本地存储值变化的视图答案

【问题标题】：Angular 2 refresh views on local storage's value changeAngular 2 刷新本地存储值变化的视图
【发布时间】：2019-08-30 00:57:06
【问题描述】：

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

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

我怎样才能做到这一点？

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

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

解决方案 3：使用商店

谢谢

【问题讨论】：

【解决方案1】：

创建一个用于获取/设置本地存储的包装服务，它也会在设置时发出。模态调用，比如this.storageService.setItem('foo', 'bar')，而导航栏订阅了this.storageService.changes$。

虽然在写入存储时会发出一个事件，但它只会在同一域的其他窗口中发出。

【讨论】：

能否请您为这个解决方案提供一个小例子，好像我正在寻找的那个。我是 angular 2 的新手。谢谢
差不多了。您创建了一个服务（对于一般要点，官方 Angular 教程就足够了），它有两种方法：getItem 和setItem，以及一个属性change$: Subject<{key, value}>。 getItem 只调用 localStorage.getItem，setItem 调用 localStorage.setItem 并且将更改发送到 change$ 流。您将服务注入导航栏和模式（以及应用程序中使用本地存储的任何地方）。导航栏订阅change$ 并在需要时更新其显示。