Angular2 -如何将服务错误返回到主应用程序组件

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('api/data').pipe(
      catchError((error: any) => {
        // 处理错误逻辑
        return throwError('发生了错误，请稍后重试。');
      })
    );
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="errorMessage">{{ errorMessage }}</div>
    <div *ngIf="data">{{ data }}</div>
  `,
})
export class AppComponent {
  errorMessage: string;
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data: any) => {
        this.data = data;
      },
      (error: any) => {
        this.errorMessage = error;
      }
    );
  }
}