Question

我正在查看是否可以在Angular服务中使用combineLatest来移除activeFiler$开关块（该服务应该做同样的事情）。这是组件design right now (stackblitz link)，我正在尝试删除所有render$除外的属性：

export class TodosComponent implements OnInit {
  constructor(private ts:TodoService) {}
  render$: Observable<Todo[]>; 
  activeFilter$: Observable<VISIBILITY_FILTER>;


ngOnInit() {
  this.render$ = this.ts.selectedTodos$;
  this.activeFilter$ = this.ts.activeFilter$;

  this.activeFilter$.subscribe(active=>{
        switch (active) {
    case VISIBILITY_FILTER.SHOW_COMPLETED:
      this.render$ = this.ts.completeTodos$;
      break;
    case VISIBILITY_FILTER.SHOW_ACTIVE:
      this.render$ = this.ts.incompleteTodos$;
      break;
    default:
      this.render$ = this.ts.todos$;
      }
  });
}
  }
}

如图所示，我已将this.render$初始化为从todo.service.ts文件返回的Observable。该方法如下所示：

  this.selectedTodos$ = 
  combineLatest(this.activeFilter$, this.completeTodos$, this.incompleteTodos$, this.todos$, this.applyFilter);

  private applyFilter(filter, completeTodos, incompleteTodos, todos): Todo[] {
    switch (filter) {
      case VISIBILITY_FILTER.SHOW_COMPLETED:
        return completeTodos;
      case VISIBILITY_FILTER.SHOW_ACTIVE:
        return incompleteTodos;
      default:
        return todos;
    }
  }

因此，在完成所有这些操作之后，我认为我应该能够删除todos组件中的this.ts.ostore.observe(ACTIVE_FILTER_KEY).subscribe(active=>{块，但是如果我删除了，则整个应用程序将停止工作。

一件奇怪的事是，如果我注释掉$activeFilter订阅并记录下来：

  this.render$ = this.ts.selectedTodos$;
  this.render$.subscribe(v=>console.log(v));

当我输入更多的待办事项时，它们会被记录下来，但是它们不会呈现...有任何想法吗？

Answer 1

我知道了。

使其工作的核心部分是，每个combineLatest至少发出一次时，Observable就会发出。

在我的情况下，ReplaySubject<Todo[]>实例在初始化EStore时没有执行通知，因此ReplaySubject<Todo[]>永远不会触发combinedLatest运算符

我更改了EStore的实现，以使其不发出任何内容或初始化EStore的实体，现在它可以正常工作。

   changeDetection: ChangeDetectionStrategy.OnPush

工作。我们不需要事件发射器或@Input使其起作用。只需查询商店，然后让它发挥作用即可。

使用RxJS CombineLatest过滤可观察对象？

1 个答案: