Angular/rxjs：livesearch 英雄教程 - 为什么使用 observable？答案

【问题标题】：Angular/rxjs: livesearch heroes tutorial - why use an observable?Angular/rxjs：livesearch 英雄教程 - 为什么使用 observable？
【发布时间】：2021-12-15 19:16:12
【问题描述】：

你能告诉我在 Angular 的 livesearch 教程中使用 Observable for heroes$ 的优势吗？ (https://angular.io/tutorial/toh-pt6)

或者换句话说，在这个特定的示例中使用常规对象而不是可观察对象是否存在“错误”？

原始示例 1 - 使用 Observable：

export class HeroSearchComponent implements OnInit {
  heroes$!: Observable<Hero[]>;
  private searchTerms = new Subject<string>();

  constructor(private heroService: HeroService,
    private http: HttpClient) {}

  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.heroes$ = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => this.heroService.searchHeroes(term)),
    );
  }
  
  searchHeroes(term: string): Observable<Hero[]> {
    if (!term.trim()) {
      return of([]);
    }
    return this.http.get<Hero[]>(`${'api/heroes'}/?name=${term}`)
  }
}

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>

没有 Observable 的版本 2：

export class HeroSearchComponent implements OnInit {
  heroes!: Hero[];
  private searchTerms = new Subject<string>();

  constructor(private heroService: HeroService,
    private http: HttpClient) {}

  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => this.heroService.searchHeroes(term)),
    ).subscribe(heroes => this.heroes = heroes);
  }
  
  searchHeroes(term: string): Observable<Hero[]> {
    if (!term.trim()) {
      return of([]);
    }
    return this.http.get<Hero[]>(`${'api/heroes'}/?name=${term}`)
  }
}

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>

为什么我会特别支持这种实时搜索的 observable？

提前致谢！

【问题讨论】：

当您使用 observable 时，您应该“取消订阅”（通常您在 ngOnDestroy 中取消订阅，请参见，例如，使用 takeUntil 的 SO。pipe async，为您工作。对我来说更多使用管道异步方法“舒适”，但它与你的一样有效
您不需要退订http请求。一次获取价值并自动退订。

标签： angular rxjs

【解决方案1】：

首先，这里有一个对服务器的请求。它适用于HttpClient 模块，默认返回Observable 值。您可以对Promise 执行相同操作，但应检查Promise 与Observable 的区别。 Angular 是关于 Observable 和 RxJS。

例如，对于实时搜索，使用observable 的一个简单理由是可取消的答案，而承诺是不可能做到的。 SwitchMap 运营商在正确的地方为你做这件事。

其次，使用ChangeDetectionStrategy 重新计算视图。 Async pipe 做正确的工作，为您提供最佳性能和易用性。

【讨论】：