时间戳

首页 > 解决方案 > await 组件之间的数据服务 Angular，行为主题

javascript - await 组件之间的数据服务 Angular，行为主题

问题描述

我在 Angular 中有一个 Behavior Subject 数据服务，它在 admin-layout-component 加载（父组件）时向服务器发出请求以获取用户详细信息，然后在用户组件中注入数据，这是我的用户组件 onInit：

ngOnInit(){
    this._dataService.currentUserDetails.subscribe(userDetails => this.userDetails = userDetails);
    console.log(this.userDetails);

    if(this.userDetails === ''){
      this.getUser();
    }
   
}

安慰

当我在用户组件中刷新浏览器时，首先加载当前组件 ngOnInit，我必须有条件检查 userDetails 并向服务器发出新请求，但 admin-layout-component 也在发出请求，我的问题：有一种等待 dataService 的方法，所以我不必使 getUser() 两次？提前致谢。

标签： javascriptangular

解决方案

您可以使用 Subject 来存储有关用户的信息，如果需要，您始终可以通过this.userDetails组件中的任何位置从主题获取数据：

export class Component implements OnInit {
  userDetails$ = new BehaviorSubject<any>(null);

 ngOnInit(){
    this._dataService.currentUserDetails.subscribe(userDetails => {
      this.userDetails.next(userDetails)
    });
 }

 get userDetails(): any {
   return this.userDetails$.getValue();
 }
}

在模板中，您可以订阅您的服务主题

  <div> {{ userDetails$ | async }} </div>

推荐阅读