Angular：canActivate：类型'OperatorFunction'上不存在属性'map'

Question

码：

导入的地图和switchMap

 import { map, switchMap } from 'rxjs/operators';

canActivate路由防护的代码：

  canActivate(): Observable<boolean> {
    return this.auth.userObservable
      .pipe(switchMap((user: firebase.User) => this.userService.fetch(user.uid))
      .map((user) => user.isSeller));
  }

我收到错误属性'map'在类型'OperatorFunction'上不存在。请看下面的截图。

截图：

我的尝试：用管道包裹地图没有用。

canActivate(): Observable<boolean> {
    return this.auth.userObservable
      .pipe(switchMap((user: firebase.User) => this.userService.fetch(user.uid))
      .pipe(map((user) => user.isSeller)));
  }

我不确定这是否是正确的语法，但上面的也会抛出错误。

我可以知道导致此错误的原因。提前致谢

Answer 1

使用RxJS's map operator的那行代码应该嵌套在你的pipe()中。

canActivate(): Observable<boolean> {
    return this.auth.userObservable
      .pipe(
        switchMap((user: firebase.User) => this.userService.fetch(user.uid)),
        map((user) => user.isSeller)
     )
  }

Answer 2

使用管道时，请用逗号分隔内部的所有操作符。

 canActivate(): Observable<boolean> {
    return this.auth.userObservable
      .pipe(switchMap((user: firebase.User) => this.userService.fetch(user.uid))
      , map((user) => user.isSeller));
  }

Answer 3

您收到该错误是因为您在map（没有名为switchMap的成员）返回的函数上调用map，因为您错误地关闭了括号。

要使用可管理的运算符，通常会将它们的调用连接为pipe的参数：

obs$.pipe(op1(...),op2(...),...,opN(...));

应用于您的代码，您需要重构为：

canActivate(): Observable<boolean> {
    return this.auth.userObservable
      .pipe(
         switchMap((user: firebase.User) => this.userService.fetch(user.uid)),
         map(user => user.isSeller)
      );
}