Question

我正在向Angular2网站添加一项功能，以显示当前登录的用户名。

我似乎能够从后端服务中检索我需要的信息。但是，当有问题的前端代码正在运行时，当只需要一个请求时，会反复发送对后端的请求。

当我更改代码以订阅observable时，这个无限循环的请求开始了。没有订阅，我能够从前端服务检索的信息不可用;它看起来像下面的例子。

{"_isScalar":false,"source":{"_isScalar":false},"operator":{}}

组件

loggedInUser() {
    this.authService.loggedInUser().subscribe(res => {
      this.currentUser = res;
      return this.currentUser;
   })
}

前端服务

loggedInUser() {
    const userId = localStorage.getItem('userId');
    return this.http
       .get('http://localhost:3000/user/current/' + userId)
       .map((response: Response) => {
    const user = response.json();
  return user;
})

我从Stack Overflow上阅读其他帖子了解到这并非真正的“无限循环”。但是，我无法理解其他帖子中的解决方案。

感谢您的帮助！

Answer 1

不确定没有小提琴但你是否直接从模板中调用组件的loggedInUser函数？

在组件中，将订阅代码移动到ngOnInit挂钩

include { Component, OnInit } from '@angular/core';
...
class AppComponent implements Oninit {

  ngOnInit() {
    this.authService.loggedInUser().subscribe(res => {
      this.currentUser = res;
    });
  }
}

请参阅模板中的this.currentUser

<div>Logged in as: {{currentUser}}</div>

最好unsubscribe中的NgOnDestroy。

Answer 2

简单的方法是在用户登录时以及在阅读完之后将您的信息存储在localStorage中。

//In your authService
loggedInUser() {
    return this.http.post(AppSettings.API_URL + 'login', data, this.options)
    .map((response: Response) => {
        let username = response.json().data.username;
        if(username){
            localStorage.setItem('username', username);
            return true;
        } else {
            return false;
        }
    }

//In your login form component
onSubmit() {
     this.authService.loggedInUser(email, ....)
         .subscribe(
             result => {
                 if (result === true) {
                     //It's ok
                 } 
             error => {
                 //error
             }
          )
}

如果您只想订阅一次，可以使用take运算符。当您离开一个组件或导航到另一个组件或在您的ngOnDestroy方法中执行此操作时，请不要忘记取消订阅您的observable。

订阅可观察时，无限HTTP请求后端

2 个答案: