避免嵌套的订阅可以通过使用 RxJS 提供的操作符如 switchMap、mergeMap、concatMap、exhaustMap 来实现。

例如，我们需要在一个 HTTP 请求返回后才能获取另一个 HTTP 请求所需的参数。传统的方式可能是嵌套调用订阅：

import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

export class MyComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('api/data').subscribe(data => {
      this.http.get(`api/some-other-data/${data.id}`).subscribe(otherData => {
        console.log(otherData);
      });
    });
  }
}

这种方式容易造成回调地狱，难以维护。我们可以使用 switchMap 操作符将其简化成一次订阅：

import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

export class MyComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('api/data')
      .pipe(
        switchMap(data => this.http.get(`api/some-other-data/${data.id}`))
      )
      .subscribe(otherData => {
        console.log(otherData);
      });
  }
}

这样就避免了嵌套的订阅，保持了代码的可读性和简洁性。