在 pipe() 中执行操作而不是直接在 subscribe() 方法中执行操作的优点/缺点是什么?

Question

我是 Angular 的新手，我正在使用与 JWT 有效负载相同的 id 过滤用户。

我可以像这样在可观察量的 subscribe(( 中执行此操作：

this.route.data.subscribe((data) => {
this.users = data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid);
});

我也可以在 pipe(( 方法中执行此操作，例如：

this.route.data
.pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)))
.subscribe((data) => {
this.users = data;
});

解析器代码(可能与问题无关(：

resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
return this.userService.getUsers().pipe(
catchError(error => {
this.alertify.error('Problem retrieving data');
this.router.navigate(['/home']);
return of(null);
})
);
}

现在为什么我应该使用 pipe(( 方法而不是直接在 subscribe(( 方法中进行过滤，在这种情况下使用 pipe(( 有什么优点或缺点吗？两者中的哪一个是传统的 Angular 方法？

我认为pipe((会慢一点，因为它首先映射然后过滤。

Answer 1

现在有了pipable运算符，你正在做声明式编程。 如果我们在订阅中做所有事情，就会有一些陷阱

• 与另一个可观察对象合并变得困难。
• 如果你想从 observable1 获取值并将其传递给 observable2，你会在另一个订阅中执行 mergeMap 还是订阅(永远不要这样做(。
• 你所有的逻辑现在都在一个函数中，很难阅读。

当你写可pipable 运算符时

1. 每个函数执行一个特定的逻辑。
2. 关注点分离
3. 您只需订阅一次(最终结果(
4. 代码看起来很整洁

看例子

const obs1$ = of(1,2,3,4,5);
obs1$.pipe(filter(val => val%2 === 0), map(val => val*2).subscribe(finalValue => console.log(value)

在订阅中写所有这些内容会看起来很糟糕！ 希望这有帮助

Answer 2

它创建一个发出所需值的可观察量。在 Angular 中，我们经常使用异步管道，因此我们不必管理订阅，因此 map 在创建和观察进入异步管道的数据是我们想要在模板中使用的数据时很有用

users$ = this.route.data
.pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)));

并使用异步管道

<ng-container *ngIf="users$ | async as users">
{{ users | json }} users here is updated each time users$ emits a value
</ng-container>

异步管道为我们管理订阅，我们不需要担心取消订阅。

这只是 RxJs 和管道的冰山一角。一旦你对 RxJs 的基础知识有了很好的理解，你真的应该停止学习 Angular。它将真正改变你构建 Angular 组件的方式。