在app.component显示所有请求错误

Question

有一个login.component,调用了login.service里的login方法，这个login又调用了util.service里的basePost方法，basePost是我封装的用来发送http请求的方法，当请求handle到错误的时候需要把错误信息让根组件app.component可以接收到.

我目前用BehaviorSubject，但是每次只有在页面首次初始化app.component的时候才会进入subscribe里面并赋值给errMsg参数，以后虽然调用到this.errSubject.next(errMsg);添加错误信息，但是app.component里都订阅不到errSubject。

util.service.ts:

  public basePost(postUrl: string, body?: any): Observable<any> {

    errSubject: BehaviorSubject<any> = new BehaviorSubject<any>('');
    const headers = new Headers({'Content-Type': UtilService.CONTENT_TYPE});
    const options = new RequestOptions({headers: headers});

    if (!body) {
      body = null;
    }

    return this.http.post(this.API_HOST + postUrl, body, options)
      .map(res => {
        return this.extractData(res);
      })
      .catch(error => {
        return this.handleError(error);
      });
  }

  private handleError(error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body['error'] || JSON.stringify(body);
      errMsg = `${error['status']} - ${error['statusText'] || ''} ${err}`;
    } else {
      errMsg = error['message'] ? error['message'] : error.toString();
    }
    console.error(errMsg);
    this.errSubject.next(errMsg);
    this.errmsg = errMsg;
    return Observable.throw(errMsg);
  }

login.service.ts:

export class LoginService extends UtilService {

  constructor(public http: Http, public router: Router) {
    super(http, router);
  }
}

  /**
   * login
   * @param body
   * @returns {Observable<any>}
   */
  login(body: any): Observable<any> {
    return super.basePost('&m=LoginSupplier&a=Login', body);
  }

app.component.ts:

  errMsg = '';

  constructor(private utilService: UtilService) {
    
  }

  ngOnInit() {
    this.utilService.getMessage()
      .subscribe(data => {
        this.errMsg = data;
      });

app.component.html:

<div class="app-tips" *ngIf="errMsg">
  <alert type="danger" dismissible="true">
    {{errMsg}}
  </alert>
</div>
<router-outlet></router-outlet>

Answer 1

你在LoginService的errSubject上调用next，却想在UtilService的errSubject上订阅到，显然是不可能的
虽然LoginService继承自UtilService，但它们并不是同一个实例
如果想在UtilService上订阅，你应该在LoginService里注入UtilService，而不是继承UtilService

export class LoginService {
  constructor(public http: Http, public router: Router, private utilService: UtilService) {
  }
  login(body: any): Observable<any> {
    return this.utilService.basePost('&m=LoginSupplier&a=Login', body);
  }
}