角度：canActivate：类型“ OperatorFunction”上不存在属性“ map”

Question

代码：

导入的地图和switchMap

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

可以激活用于路由防护的代码：

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

我收到错误消息类型“ OperatorFunction”上不存在属性“ map”。请查看下面的屏幕截图。

屏幕截图：

我的尝试：用管道包裹地图无济于事。

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)
      );
}