Angular/rxjs: livesearch 英雄教程 - 为什么要使用 observable？

Question

您能告诉我在 Angular 的 livesearch 教程中为 heroes$ 使用 Observable 的优势吗？ (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>

为什么我特别喜欢这个 livesearch 的 observable？

提前致谢！

Answer 1

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

例如，对于实时搜索，使用 observable 的一个简单原因是可取消的答案，这是不可能用 promise 做的。 SwitchMap 接线员在正确的地方为您完成。

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

Angular/rxjs: livesearch 英雄教程 - 为什么要使用 observable？

Angular/rxjs: livesearch heroes tutorial - why use an observable?

rxjs

angular