使用观察值在Angular中依次调用两个服务

import { Observable, of } from 'rxjs';

import { Injectable } from '@angular/core';

@Injectable()
export class Service1 {
  getData(): Observable<any> {
    // 在此处执行异步操作，例如从服务器获取数据
    const data = 'Service1 Data';
    return of(data); // 使用of操作符将数据包装成观察值
  }
}

import { Injectable } from '@angular/core';

@Injectable()
export class Service2 {
  getData(): Observable<any> {
    // 在此处执行异步操作，例如从服务器获取数据
    const data = 'Service2 Data';
    return of(data); // 使用of操作符将数据包装成观察值
  }
}

import { Component, OnInit } from '@angular/core';
import { Service1 } from './service1.service';
import { Service2 } from './service2.service';

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ result }}</div>
  `,
})
export class MyComponent implements OnInit {
  result: string;

  constructor(private service1: Service1, private service2: Service2) {}

  ngOnInit() {
    this.service1.getData().subscribe((data1) => {
      this.service2.getData().subscribe((data2) => {
        this.result = data1 + ' ' + data2;
      });
    });
  }
}