我在订阅在不同组件中调用的观察者时遇到问题。
我的 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 中的用户,单击注销按钮时应取消设置。
最佳答案
我只是使用 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>
关于angular - 与其他组件或服务共享可观察量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45619085/