在Angular 7中,使用RxJS的switchMap操作符时,有时候会出现多次调用的问题。这是因为switchMap在每次源Observable发出新的值时都会取消之前的内部Observable,并订阅一个新的内部Observable。
解决这个问题的方法是使用debounceTime
操作符来延迟源Observable的发出时间。这样就可以确保在源Observable发出新的值之前,先取消之前的内部Observable的订阅。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { switchMap, debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
- {{ result }}
`,
})
export class ExampleComponent implements OnInit {
public searchTerm: string;
public searchResults$: Observable;
ngOnInit() {
this.searchResults$ = of('').pipe(
debounceTime(300), // 延迟300毫秒
switchMap(() => this.search())
);
}
search(): Observable {
// 模拟异步请求,返回一个Observable
return of(['result 1', 'result 2', 'result 3']);
}
}
在上面的示例中,我们使用debounceTime
操作符来延迟源Observable的发出时间为300毫秒。这样,当用户输入搜索关键字时,只有在用户停止输入300毫秒后,才会发送搜索请求。
这样就可以避免在用户快速输入时多次调用switchMap。
上一篇:Angular 7中的SVG清理
下一篇:Angular 7中的图片懒加载