angular switchMap的用法

Angular 中的 switchMap 是一个非常有用的操作符，它用于处理 Observable 流中的数据转换。

在 Angular 中，当我们订阅一个 Observable 流时，它会返回一个 Subscription 对象，该对象用于取消订阅。而 switchMap 操作符可以让我们在订阅过程中转换 Observable 流，同时还可以在新的 Observable 流发出数据时自动取消旧的 Observable 流的订阅。

具体来说，switchMap 操作符接收一个函数参数，该函数接收 Observable 流中的数据，并返回一个新的 Observable 流。当 switchMap 接收到一个新的数据时，它会立即取消旧的 Observable 流的订阅，并开始订阅新的 Observable 流。这使得我们可以轻松地处理一些类似搜索框自动完成等场景，同时也可以有效地避免内存泄漏等问题。

下面是一个简单的 switchMap 示例：

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');
const searchResult = document.getElementById('search-result');

fromEvent(searchBox, 'input').pipe(
  switchMap((event: Event) => {
    const query = (event.target as HTMLInputElement).value;
    return search(query); // 返回一个搜索结果的 Observable 流
  })
).subscribe((result: string) => {
  searchResult.innerHTML = result;
});

在这个示例中，我们从搜索框的 input 事件创建了一个 Observable 流，并通过 switchMap 操作符将其转换为一个新的 Observable 流，该流会根据搜索框的输入内容返回相应的搜索结果。这样，每当用户输入新的内容时，旧的搜索结果就会被取消订阅，并开始订阅新的搜索结果。最后，我们将搜索结果显示在页面上。