如何使用异步管道而不是使用订阅？

Question

我想使用异步管道“| async”而不是订阅。这是我的订阅代码目前的样子：

ngOnInit(): void {
  this.activatedRoute.url
    .pipe(takeUntil(this.unsubscribe$))
      .subscribe(segments => {
        this.quizName = segments[1].toString();
      });
}

在我的模板中我有：<mat-card *ngIf="quiz.quizId === quizName">

Answer 1

让我们试试这个：

quizName$: Observable<any>;

ngOnInit(): void {
  this.quizName$ = this.activatedRoute.url
    .pipe(
      takeUntil(this.unsubscribe$),
      map(segments => segments[1].toString()); // Not sure about this part
    );
}

<mat-card *ngIf="(quizName$ | async) === quiz.quizId">

小心，每次在模板中使用异步管道时，它都会进行订阅。

Answer 2

添加变量：

quizName$ = this.activatedRoute.url.pipe(map(segments => segments[1].toString()));

不需要 takeUntil 诸如“| async”就可以了
可选（您的 IDE 会自己知道）

quizName$: Observable<string> ...

在HTML中：

*ngIf="(quizName$ | async) === quiz.quizId"

更“稳健”的解决方案

showQuiz$: Observable<boolean> = this.activatedRoute.url.pipe(
  map(segments => segments[1].toString()),
  map(quizName => quizName === this.quiz && this.quiz.id)
);

*ngIf="showQuiz$ | async"

如何使用异步管道而不是使用订阅？

How do I use async pipe instead of using subscribe?

javascript

angular

rxjs

angular-pipe