传递数据的 Observable 和 EventEmitter parents (Angular)

Question

我有以下结构：

主要组件（通过 item-service 呈现项目）
- 面板组件（包含搜索组件）
  - SerachByTitle 组件（包含标题项的输入字段）
  - SerachBySomething 组件（包含某些项目的某些输入字段）
项目服务

当用户在 SerachByTitle-component 内输入标题时，我想在 Main-component 内呈现项目（适合 search-request）。

为此我使用了 EventEmitter： Panel-component、SerachByTitle-component 和 SerachBySomething-component 有装饰器@Output。

SerachByTitle 和 SerachBySomething 传数据给Panel-component，Panel-component形成单object-params，再传给Main-component.

我运行在用户输入标题时出现问题 - 在每次键入 Main-component re-render 项之后。我尝试使用组合：debounceTime(timeDelay)、distinctUntilChanged()、switchMap()，但它对我没有帮助。

我做错了什么？

抱歉我的英语不好:(

UPD：为了了解我的情况，我添加了 example。对于 main-component，我使用了组合：debounceTime()、distinctUntilChanged()、switchMap()。但是不存在搜索延迟

Answer 1

这是您的代码 (main.component.ts)：

searchChangedHandler(filter){
  this.itemService.searchItems(filter).pipe(
      debounceTime(1300),
      distinctUntilChanged(),
      switchMap((items) => this.listItems = items),
    ).subscribe();
}

问题是你在错误的地方应用了debounceTime+distinctUntilChanged。这是您的项目中发生的事情的简化图：

      #1                   #2                       #3                                
oninput event ---> ItemService.search(term) ----> of(items) ---> ...

                           #4                                      #5
... ---> pipe(debounceTime(1300)+distinctUntilChanged) ---> this.listItems = items

基本上，您运行搜索每次击键，然后对搜索结果应用 debounceTime+distinctUntilChanged。这没什么意义，因为您显然想限制发送到 ItemService 的请求数量，因此您必须申请调用 ItemService 之前的 debounceTime

（您可能想知道为什么您没有看到 1300 延迟甚至应用于 ItemService.search 的结果，并且您会立即看到变化。原因是 of(items) 在步骤 # 3 在上图中创建一个新的 observable 立即完成，因此不应用延迟）。

所以这是处理这个问题的正确方法：

oninput event ---> pipe(debounceTime(1300)+distinctUntilChanged) ----> ...

... ----> ItemService.search(term) ----> this.listItems = items

  private searchStream = new Subject<any>();

  ngOnInit() {
    this.searchStream
      .pipe(
        debounceTime(1300),
        distinctUntilChanged(),
        switchMap(filter => this.itemService.searchItems(filter))
      )
      .subscribe(items => this.listItems = items);
  }

  searchChangedHandler(filter){
    this.searchStream.next(filter);
  }

这是更正后的项目：https://stackblitz.com/edit/angular-iopeep

传递数据的 Observable 和 EventEmitter parents (Angular)

Observable and EventEmitter for pass data parents (Angular)

observable

eventemitter

angular

angular8