如何在传播中使用可观察量

Question

我是 Angular 的新手。我正在尝试进行授权并面临以下任务：

有一个从前端获取用户的服务。我想将此用户存储在服务本身中。为此，我使用 checkUser() 函数。接下来，我想从组件访问这个变量，当它在服务中发生变化时，这些变化被组件接收到。我认为我可以为此使用 Observable（服务中的 getCurrentUser() 函数）。但是该组件没有提出任何建议。你能告诉我哪里出了问题以及我该如何实施吗？谢谢指教。

服务：

const API_URL = environment.apiUrl;

@Injectable()
export class AuthService {
  // public user: Account;
  public user: Account;

  constructor(private http: HttpClient) {
    this.checkUser();
    const intervalId = setInterval(() => {
      console.log('Auth: ', this.user);
    }, 2000);


  }

  checkUser() {
    return this.http
      .get<Account>(API_URL + '/get_user', { withCredentials: true })
      .take(1)
      .subscribe(user => {
        this.user = user;
        console.log(this.user);
      });

  }

  login(user) {
    this.http
      .post<Account>(API_URL + '/login', user, { withCredentials: true 
}).take(1)
      // .catch(this.handleError)
      .subscribe(response => {
        console.log('Resp: ', response);
        this.checkUser();
      });
  }


  getCurrentUser(): Observable<Account> {
    return Observable.of(this.user);
  }

  private handleError(error: Response | any) {
    console.error('ApiService::handleError', error);
    return Observable.throw(error);
  }

}

组件：

@Component({
  selector: 'app-bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent implements OnInit {
  // public user$: Observable<Account>;
  public user: Account;

  constructor(private authService: AuthService) {
    const intervalId = setInterval(() => {
      console.log(this.user);
    }, 2000);


  }

  ngOnInit() {
    this.authService.getCurrentUser().
      subscribe(user => {
        this.user = user;
        console.log('Navbar: ', user);
      });

  }
}

Answer 1

可能值得对 Subject 感兴趣？

服务代码：

const API_URL = environment.apiUrl;

@Injectable()
export class AuthService {
    private user: Subject<Account> = new Subject();

    constructor(private http: HttpClient) {
        this.checkUser();
    }

    checkUser() {
        return this.http
            .get<Account>(API_URL + '/get_user', { withCredentials: true })
            .take(1)
            .subscribe(user => {
                this.user.next(user);
            });
    }

    login(user) {
        this.http
            .post<Account>(API_URL + '/login', user, { withCredentials: true })
            .take(1)
            .subscribe(response => {
                this.checkUser();
            });
    }

    getCurrentUser(): Observable {
        return this.user.asObservable();
    }

    private handleError(error: Response | any) {
        return Observable.throw(error);
    }
}

无需更改组件。

如何在传播中使用可观察量

How to use observables in propagation

angular

angular2-observables

服务：

组件：