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

Posted 2023-02-19

【中文标题】如何以角度获取当前课程ID？

【英文标题】：How to get current course ID in angular?

【发布时间】：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。有什么想法我该怎么做？

【参考方案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()