Question

我有一个登录服务，它可以将数据添加到本地存储中。用户数据（姓名，姓氏）。

我在标题（这是另一个组件）中显示用户名。调用它，我使用：

header.component.ts

getUser(){
 this.user = JSON.parse(localStorage.getItem('user'));
}

这是我的服务

user.service.ts

readUser(f: any): Observable<User[]> {
    return this.http.get(`${this.baseUrl}`+'/login/login.php?email='+f.email+'&password='+f.password).pipe(
      map((res) => {
        this.user = {
          'id' : res[0].id_user,
          'surname' : res[0].surname_user,
          'name' : res[0].name_user,
          'email' : res[0].email_user,
          'password' : res[0].password_user,
          'city' : res[0].city_user,
          'birthdate' : res[0].birthdate_user,
        }

        localStorage.setItem('isLoggedin', 'true');
        localStorage.setItem('user', JSON.stringify(this.user));
        return this.user;
    }),
    catchError(this.handleError));
  }

但是，当然，当我更新配置文件时，本地存储中的数据正在更新（@firebug），但视图中的数据不会更改。我必须刷新页面。

我尝试订阅localStorage项，但没有成功。

感谢您的帮助！有一个好：）

Answer 1

您可以编写与主题/可观察对象一起使用的自己的存储服务。如果您要使用延迟加载模块并且您的应用程序会增长，请考虑使用Redux存储之类的东西来拥有单一的事实来源，并且不要混淆存储的状态。

可以在此处找到存储服务的示例：https://gitlab.com/Cedwetzel/snipppets/snippets/1882744

编辑：或者查看@malbarmawi答案以及最新的示例代码。

Angular 8观看本地存储更改

1 个答案: