Question

我正在使用Angular 6

在进行用户身份验证的登录方法中。我调用服务auth来存储令牌，还同时获取登录的用户配置文件信息并存储在本地存储中，然后重定向到允许的页面。

这是我的登录方法

loginUser() {
    const email = this.loginForm.value.username;
    const password = this.loginForm.value.password;

    this.auth.getAuthToken(email, password).subscribe(response => {

        // User is authenticated, save response access token credentials
        // in local storage using Auth Service
        this.auth.setCredentials(response);

        /**
         * Get user profile
         */
        this.account.getProfile().subscribe(
            res => {
                // Store user info to local storage
                this.auth.setProfileInfo(res);
            }
        );

        this.router.navigate(['dashboard']).then();

    });
}

之所以这样做，是因为个人资料信息包含已登录的用户名，头像和其他详细信息，而我很少使用这些信息来显示在带有头像的导航元素中。

现在，我有几个其他组件可供登录用户更改其个人资料信息，例如使用其他组件更改头像，使用其他组件更改名称，等等。

在每个组件中，我都使用本地存储中存储的值在UI中显示。

但是，无论何时更改个人资料信息，我都需要手动将更新的个人资料信息存储到本地存储中，以便可以在任何地方反映出来。

有什么办法可以触发自定义更改事件并提供服务来监听该事件并将其自动保存到本地存储中？

编辑2

即使本地存储中的更新值也不会在导航html内容中更新。刷新页面后，更改会反映出来。

Answer 1

您甚至如何从本地存储访问数据？普通的本地存储数据仅用于保存用户重新打开应用程序时的数据。否则，您将其保留在服务中，并且一旦更改了服务中的价值，便会将其应用到本地存储中（但只是将其存储在备份中，而不是不断读取它。

我使用观察值解决了这个问题。您可以观察到一个基本触发器。并且一旦触发了该可观察性，便会获取要刷新的数据。

@LocalStorage()
storageValue: YourData;

profileChanged$ = new BehaviorSubject(true);

userProfile$ = profileChanged$.pipe(
  startWith(this.storageValue)
  switchMap(() => getDataObservable()),
  tap(res => this.storageValue = res)
  share()
);

// and then in login
login() {
  // PREVIOUS AUTH
  
  this.profileChanged$.next(true);

}

您可以在组件中使用异步管道或订阅来订阅要显示的可观察数据。

该装饰器仅用于自动将您的值保存到本地存储。您可以在这里找到它：https://www.npmjs.com/package/ngx-webstorage

基本上，这是做什么的：

用于保存本地存储值的值-storageValue
trigger可用于重新获取数据
管道触发：首先开始使用缓存数据，刷新数据，新数据保存到存储，然后使用share（）成为热门观察对象（有cold and hot observables）
在登录时只需触发第一个triggerObservable即可重新获取数据。您也可以在需要它的任何地方调用此触发器。

通过Angular中的应用程序在更改特定项目时更新本地存储值

1 个答案: