1

所以我正在听一个路由参数：

searchResults$: Observable<string[]>;

constructor(
  private route: ActivatedRoute,
  private svc: SearchService) { 
  this.searchResults$ = this.route.paramMap.pipe(
    map((p: ParamMap) => p.get('searchTerm')),
    switchMap((searchTerm: string) => this.svc.getSearchResults(searchTerm))
  );
}

...我正在用异步管道打开它...

<p>Search Results</p>

<ul *ngIf="searchResults$ | async as results; else loading">  
    <li *ngFor="let r of results">
        {{ r }}
    </li>
</ul>

<ng-template #loading>Loading!!11!</ng-template>

我正在使用ChangeDetectionStrategy.OnPush，并希望继续这样做

每当组件首次初始化时，这非常有用。

但是，如果我使用角度路由器来提供不同的路由参数（当组件仍在加载时）：

this.router.navigate(['search/${searchTerm}`])

那么searchResult$observable 永远不会未定义，else loading也永远不会被调用。新列表只是替换旧列表，而不向用户指示正在加载。

是否有一种 OnPush 友好的方式来获取加载模板以显示路由 paramMap 可观察对象何时提供新值？

我已经尝试回到默认更改检测并将一堆tap(() => this.isloading = true;)放入我的可观察组合中 - 但我不想这样做，我想看看我是否可以在使用 OnPush 更改检测时做到这一点。

StackBlitz 这里

4

1 回答 1

1

您可以简单地让您的 switchMapped observable ：startWith undefined

  this.searchResults$ = this.route.paramMap.pipe(
    map(p => p.get('searchTerm')),
    switchMap(searchTerm => this.svc.getSearchResults(searchTerm).pipe(
      startWith(undefined)
    ))
  );
于 2021-09-16T01:00:43.887 回答