如何以角度获取当前课程ID？答案

【问题标题】：How to get current course ID in angular?如何以角度获取当前课程ID？
【发布时间】：2021-11-06 05:25:21
【问题描述】：

我有这行代码

ngOnInit(): void {
        this._store.select(AuthSelectors.isLoggedIn).pipe(
            takeUntil(this.destroySubject$),
            tap((isLoggedIn) => {
                if (isLoggedIn) {
                    this._store.select(selectCourseToBeEnrolled)
                        .pipe(filter(value => !!value), first())
                        .subscribe(course => this._store.dispatch(enrollWhatToLearnCourse({
                                id: course.id,
                                title: course.title,
                                enroll: false
                            }))
                        );
                }
            }),
            tap(() => this._store.dispatch(loadOneCourse({}))) //here
        ).subscribe();
    }

现在我在哪里评论我需要通过道具传递当前课程的 ID。有什么想法我该怎么做？

【问题讨论】：

标签： angular redux rxjs

【解决方案1】：

您可以通过使用更高映射运算符之一（例如switchMap、mergeMap）将内部 observable 与源 1 合并来实现这一点，然后course 将在下一个运算符中可用（tap）。

您可以尝试以下方法：

  ngOnInit(): void {
    this._store
      .select(AuthSelectors.isLoggedIn)
      .pipe(
        takeUntil(this.destroySubject$),
        switchMap((isLoggedIn) => {
          if (isLoggedIn) {
            return this._store.select(selectCourseToBeEnrolled).pipe(
              filter((value) => !!value),
              first()
            );
          }
          // return null if the user is not logged in
          return of(null);
        }),
        // only pass it to the following operators if the course has a value
        filter((course) => !!course),
        // if the couse has value, then you can use it directly within the next taps
        tap((course) => {
          this._store.dispatch(
            enrollWhatToLearnCourse({
              id: course.id,
              title: course.title,
              enroll: false,
            })
          );
        }),
        tap((course) => this._store.dispatch(loadOneCourse({ course })))
      )
      .subscribe();
  }

您可以查看以下博客以获取更多详细信息 RxJS 高级映射运算符： https://blog.angular-university.io/rxjs-higher-order-mapping/

【讨论】：

【解决方案2】：

试试这样：

this._store.select(AuthSelectors.isLoggedIn).pipe(
    takeUntil(this.destroySubject$),
    switchMap(isLoggedIn => {
        if (!isLoggedIn) return EMPTY
        return this._store.select(selectCourseToBeEnrolled)
                   .pipe(
                       filter(value => !!value), 
                       first(),
                       tap(course => {
                           this._store.dispatch(enrollWhatToLearnCourse({
                                id: course.id,
                                title: course.title,
                                enroll: false
                            })
                       })
                   )
    }),
    tap((course) => this._store.dispatch(loadOneCourse({})))
).subscribe()

【讨论】：