映射行为主体并在映射 rxjs 后将其分配给相同的变量

Question

我有一个场景，我的子组件将 BehaviourSubject 作为输入，并且（子）在内部订阅它。 我需要在父级中的 BehaviourSubject 上进行过滤/映射，以便在调用 next() 的某个位置时，子订阅会接收映射/过滤后的值。

export class ParentComponent {
    public myBSubject: BehaviorSubject<ListFilter[]> = new BehaviorSubject<ListFilter[]>(undefined);
    public ngOnInit(): void {
        this.myBSubject = this.myBSubject.pipe(
          map((filters): ListFilter[] => {
            // Do some manipulation with filters
          return filters;
        }));
    }
}

模板

<child [myBSubject]="myBSubject"> </child>

ChildComponent（我无法控制它。）

export class ChildComponent {
 @Input()
  public myBSubject: BehaviorSubject<ListFilter[]> = new BehaviorSubject<ListFilter[]>(undefined);
  
  // somewhere subscription of myBSubject

}

问题是 .pipe(map) 将 BehaviourSubject 转换为 Observable，这是不可分配的。并且没有分配地图回调，因为地图不可变。

通过制作 .pipe(map..) as BehaviourSubject<ListFilter> 工作正常，但我觉得这不是一个好的解决方案。 请帮助我以更好的方式实现这一目标，谢谢。

Answer 1

请查看this answer 的类似问题。

除了此处描述的 2 个选项（使用 input property setter 或实现 OnChanges），我相信还有第三种可能适合您的需求，因为您的 BehaviorSubject 的数据来自另一个 observable。

在您的父组件中，更新第一个 observable 的订阅正文中的 BehaviorSubject 的值。然后在父组件的模板中，通过异步管道传递 BehaviorSubject 并将其用作子组件的输入。

父组件：

export class ParentComponent {
    public myBSubject: BehaviorSubject<ListFilter[]> = new BehaviorSubject<ListFilter[]>(undefined);
    public ngOnInit(): void {
        this.firstObservable.pipe(
          map(value => // map to ListFilter array here)
        ).subscribe(result => this.myBSubject.next(result));
    }
}

模板：

<child [myBSubject]="myBSubject | async"> </child>