已升级到 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>'.

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

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 does not exist"等等。如果我 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']);
                }
            })
    );

已升级到 Angular/AngularCLI/Rxjs 版本 6 但得到 "Property 'take' does not exist on type 'Observable"

Upgraded to Angular/AngularCLI/Rxjs version 6 but getting "Property 'take' does not exist on type 'Observable"

javascript

frontend

rxjs

angularfire2

angular