javascript - 升级到 Angular/AngularCLI/Rxjs 版本 6 但获取 "Property ' take' does not exist on type 'Observable"

Question

我决定将我的 Angular5 工作项目升级到 Angular6 并随之升级所有依赖项(例如 rxjs 现在是版本 6 以及 angular-cli)

我遇到了一个似乎无法解决的问题:

ERROR in src/app/services/auth/auth-guard.service.ts(25,14): error TS2339: Property 'take' does not exist on type 'Observable<User>'.

这在以前不是问题。我知道现在我们需要用“管道”包装 rxjs 运算符，尽管我在这里尝试过，管道包装器内的嵌入式代码仍然会导致类似的问题，所以我决定将损坏的类放在这里:

import { Injectable } from '@angular/core';
import {
    Router,
    CanActivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
} from '@angular/router';
import { Observable } from 'rxjs';

import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate {

    constructor(
        private authService: AuthService,
        private router: Router
    ) { }

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {
        return this.authService.currentUser
            .take(1)
            .map(user => !!user)
            .do(signedIn => {
                if (!signedIn) {
                    console.log('access denied');
                    this.router.navigate(['/signin']);
                }
            });
    }

}

我尝试用以下方法修复它:

import { take } from 'rxjs/operators';

...

return this.authService.currentUser
    .pipe(
        take(1)
            .map(user => !!user)
            .do(signedIn => {
                if (!signedIn) {
                    console.log('access denied');
                    this.router.navigate(['/signin']);
                }
            })
    );

但随后得到“ map 不存在”等等。如果我 take(1).pipe( 然后我得到管道不存在。

我没有成功找到合适的答案。

以防万一 AuthService 中的 this.authService.currentUser 设置看起来像这样(注意，对于这个我成功地使用了 pipe让 switchMap 工作:

constructor(
        private router: Router,
        private afAuth: AngularFireAuth,
        private afs: AngularFirestore,
        private http: HttpClient,
        private headerService: HeaderService
    ) {
        this.authState = this.afAuth.authState;
        this.currentUser = this.afAuth.authState
            .pipe(
                switchMap(user => {
                    if (user) {
                        return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
                    } else {
                        return of(null);
                    }
                })
            );
    }

Answer 1

当您使用管道运算符时，您需要导入您使用的所有运算符。此外，管道函数内不需要点符号。

import { take,map,tap } from 'rxjs/operators';

...

return this.authService.currentUser
    .pipe(
        take(1),
        map(user => !!user),
        tap(signedIn => {
                if (!signedIn) {
                    console.log('access denied');
                    this.router.navigate(['/signin']);
                }
            })
    );