angular - 与其他组件或服务共享可观察量

Question

我在订阅在不同组件中调用的观察者时遇到问题。

我的 Angular 4 应用程序有一个导航栏，其中包含一些用户信息。用户信息是通过登录时向服务器发出的 http 请求获取的。这是通过 LoginService 进行管理的。注销时我们将用户设置为 null。

logIn() {
  return this.http
  .get(this.apiUrl)
  .map(response => response.json())
}

logOut() {
  return Observable.of(null)
}

从登录组件中，可以很容易地使用该服务获取用户详细信息。

logIn() {
  this.loginService.logIn().subscribe((user) => {
    console.log('Logged in')
    this.user = user
    console.log(this.user)
  )
}

但我还需要从另一个组件获取它们以设置导航栏中的值。我想我需要使用导航栏组件来订阅 LoginService logIn() 和 logOut() 函数，合并这些可观察量，如果它们中的任何一个触发事件，则更新用户。但我无法订阅它们，两天后我仍然停留在这个问题上。

I've made a plunk to show the problem 。单击登录按钮时，应设置 app.component 中的用户，单击注销按钮时应取消设置。

Answer 1

我只是使用 BehaviorSubject 而不是将用户保留为 LoginService 中的属性。然后您可以在需要当前用户的任何时候订阅它。然后注销只需调用 .next(null):

看到您更新的plnkr:https://plnkr.co/edit/soeqH4IiNhcanNqxdnLS?p=preview

登录服务

@Injectable()
export class LoginService {
  private apiUrl = 'https://api.github.com/users/geraintanderson'

  user$ = new BehaviorSubject(null);

  constructor(
    private http: Http
  ) {}

  logIn() {
    return this.http
      .get(this.apiUrl)
      .map(response => response.json())
      .do(user => this.user$.next(user))
  }

  logOut() {
    this.user$.next(null);
  }
}

模板:

<span *ngIf="loginService.user$ | async; else noUser; let user">
  Logged in as <b>{{ user.name }}</b>
</span>
<ng-template #noUser><span>Not logged in</span></ng-template>