将一项服务注入另一项服务并可以访问注入的服务成员 Angular 7

Question

我在这里阅读的所有内容： https: //angular.io/guide/dependency-injection-in-action使得这看起来应该是可能的，但是当尝试从另一个注入的服务上调用方法时，我收到此错误服务：

TypeError：无法在 CatchSubscriber.handleError [作为选择器] (project.service.ts:30) 处读取未定义的属性“isLoggedIn”，位于 TapSubscriber._error (tap.js:56) 处的 CatchSubscriber.error (catchError.js:29) 处TapSubscriber.error (Subscriber.js:55) 在 MapSubscriber._error (Subscriber.js:75) 在 MapSubscriber.error (Subscriber.js:55) 在 FilterSubscriber._error (Subscriber.js:75) 在 FilterSubscriber.error (Subscriber. js:55) 在 MergeMapSubscriber.notifyError (OuterSubscriber.js:7) 在 InnerSubscriber._error (InnerSubscriber.js:14)

这是我的ProjectService，正在注入我的UserService

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError, of } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { AuthHeader } from '../../Shared/Helpers/AuthHeader';
import { UserService } from '../../User/Services/user.service';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  constructor(private http: HttpClient, private userService: UserService) {

  }
  private projectsApiEndPointRoot = '/api/ProjectApi/';
  test(): Observable<number> {
    return <Observable<number>>this.http.get<number>(this.projectsApiEndPointRoot + "getimages/8", { headers: AuthHeader.getAuthHeader() }).pipe(
      tap(data => console.log(data)),
      catchError(this.handleError)
    );
  }

  private handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      if (err.status == 401 || err.status == 403) {
        console.log(this.userService.isLoggedIn());
      }
      else {
        errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
      }
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

只是UserService有一个方法，无论用户是否登录，都应该返回布尔值。我在多个组件上成功使用了相同的方法，但在尝试从其他服务调用它时它不起作用。

这不可能吗？

编辑：添加用于演示的位UserService：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, of, BehaviorSubject } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { EmailModel } from '../Models/EmailModel';
import { ILoginRequest } from '../Interfaces/ILoginRequest';
import { ILoginResponse } from '../Interfaces/ILoginResponse';
import { IRegistrationRequest } from '../Interfaces/IRegistrationRequest';
import { Router } from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient, private router: Router) { }
  private usersApiEndPointRoot = 'api/UserApi/';

  private loggedIn = false;
  ...

  isLoggedIn() {
    return this.loggedIn;
  }


  private handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

Answer 1

问题是您正在将函数传递给用户服务。当它被调用时，它的值this将是窗口。

不要将函数传递给catchError函数，而是使用 lambda 函数来保留 this 。对test()方法进行以下更改，您的问题将得到解决：

test(): Observable<number> {
  return <Observable<number>>this.http.get<number>(this.projectsApiEndPointRoot + 
      "getimages/8", { headers: AuthHeader.getAuthHeader() }).pipe(
    tap(data => console.log(data)),
    catchError(err => this.handleError(err)) // <--
  );
}