angular - RXJS Observable 移除管道操作符

标签 angular rxjs observable

我有一个问题,我想删除/添加任何以前添加的 observable 运算符。

我得到了以下我无法更改的可观察值:

let objects$ = of([{
      category: 1,
      name: 'Some1'
    }, {
      category: 2,
      name: 'Some2'
    }]).pipe(
      map(o => o.filter(b => b.category === 2))
    )
    objects$.subscribe(obj => console.log(obj));

这输出:{category: 2,name: 'Some2'}正如预期的那样。

现在我想将过滤器的值更改为 b.category === 1输出 {category: 1,name: 'Some1'} .

如果我执行以下操作:
objects$.pipe(
      map(o => o.filter(b => b.category === 1))
    )
    objects$.subscribe(obj => console.log(obj));

我仍然得到 {category: 2,name: 'Some2'} .

如果我做:
objects$ = objects$.pipe(
      map(o => o.filter(b => b.category === 1))
    )
    objects$.subscribe(obj => console.log(obj));

我得到 []因为 observable 的输出不再具有类别 1。

我的问题是如何删除 .pipe()从原来的 observable 添加一个新的?

最佳答案

您不能删除运算符

通过使用 pipe例如调用observable$.pipe( map(..) )你并没有真正在 observable$ 中添加一些东西稍后可以删除,即使短语 add operator X to your observable很安静经常使用。

A pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified



const o1$ = of('1');
const o2$ = o1$.pipe(
  map(x => x + '2'),
  map(x => x + '3')
);

相当于

const o1$ = of('1');
const o2$ = map(x => x + '3')(
  map(x => x + '2')(
    o1$
  )
);

你基本上是用你原来的 Observable o1$ 链接纯函数调用。作为输入,其他一些 Observable 作为输出。 o1$不会更改,因此您必须将返回的值分配给变量( o2$ )以供以后使用或直接使用它才能产生任何效果。

在上面的示例中,您可以重用 o1$并创建一个不同于 o2$ 的 Observable通过在 o1$ 上使用不同的运算符.但是,您不能删除用于定义 o2$ 的函数调用。来自 o2$ .

您应该能够更改您关心的实现细节

如果你得到一个 Observable 你不能改变你不应该关心它的具体实现,而只关心它发出的内容。在这种情况下,Observable 对您来说是一个黑盒子,据您所知,它只会发出 { category: 2, name: 'Some2' } .你不知道也不应该关心 Observable 在发出这个值的过程中所做的具体事情。

但是你似乎知道并关心 Observable 在发出这个值之前做了什么。如果你这样做了,你(或同事)必须有一种方法来改变 Observable 的实现。

动态注入(inject)代码

如果您的代码的一部分应该是固定的,而另一部分应该是动态的,您可以定义一个接受另一个函数(动态部分)作为输入的高阶函数(固定部分),并以这种方式从一个原始 Observable 创建不同的 Observable:

let getObjects$ = (predicate: (value: any) => boolean) => of([
  {
    category: 1,
    name: "Some1"
  },
  {
    category: 2,
    name: "Some2"
  }
]).pipe(map(o => o.filter(predicate)));

getObjects$(v => v.category === 1).subscribe(obj => console.log(obj));
getObjects$(v => v.category === 2).subscribe(obj => console.log(obj));

关于angular - RXJS Observable 移除管道操作符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58855858/

相关文章:

javascript - 如果指定为 `@ViewChildren` 的读取参数,ViewContainerRef 会引用哪些组件 View

angular - 在 Angular 6 组件 ngOnInit 函数中测试 rxjs 间隔

Angular 2 Http 提供者的可观察订阅未触发

rxjs - 如何调试 observable 是否取消订阅

javascript - 带有平面图的可观察重试/重试时

firebase - Angularfire2:授权更改和权限被拒绝时的嵌套可观察量

javascript - _this.host.getOutputName 中的 Angular 5 错误不是函数

angular - 在 Angular 6 应用程序中发布请求

javascript - 仅选择一个复选框

rxjs - 将回调 hell 转换为可观察链