时间戳

首页 > 解决方案 > Angular：如何从服务共享价值到整个项目 Angular 11？

angular - Angular：如何从服务共享价值到整个项目 Angular 11？

问题描述

我的角度项目有问题。当我登录并将用户的数据保存到本地存储并希望与整个项目共享以在每个组件中使用它时，无需导入 UserService 的模板。你能给我建议如何解决这个问题吗？谢谢。

@Injectable({
  providedIn: 'root'
})
export class UserService {

  // Get information of current user in local storage
  getCurrentUser(): IUser {
    const user = JSON.parse(localStorage.getItem('auth-user'));
    return {
      _id: user?._id,
      avatarUrl: user?.avatarUrl,
      username: user?.username,
      bio: user?.bio,
    };
  }
}

对不起！我的英语比较差。

标签： angular

解决方案

这是您可能更喜欢的另一种解决方案。将用户作为可观察对象添加到UserService，将服务作为公共注入并使用async管道直接在模板中引用可观察对象。

export class UserService {
  user$ = new BehaviourSubject<IUser>(null);

  update(user: IUser) { this.user$.next(user); }
}

@Component({/*...*/}) class SomeComponent {
    constructor(public usr: UserService) {}
}

  <div>{{ (usr.user$ | async).name }}</div>
  <div>{{ (usr.user$ | async).bio }}</div>
  <app-some-pure-user-component [user]="usr.user$ | async" />

推荐阅读