Angular 10中的FirebaseObjectObservable和CanActivate问题

如何解决Angular 10中的FirebaseObjectObservable和CanActivate问题

我告诉你我的问题。我开了一个关于udemy的角度课程。关键是在课程中他们使用角度4，而我使用角度10，而我后来才意识到版本的这种变化。在整个课程中，我一直在将很多东西从4号角迁移到10号角，但它给了我一个阻碍。

我们正在做一个练习，一个是我在一个ShoppingCart网站上，一个是我在做Admin用户，因此，它只能具有普通用户无法访问的权限。我为此制作了组件和服务，但显然讲师使用的程序版本与当前的angular版本不同。

我留下了显示问题的代码（带有指示发生问题的注释）：

User.service.ts =>这是给我错误的组件之一

import { Injectable } from '@angular/core';
import { AngularFirestore,AngularFirestoreDocument} from '@angular/fire/firestore';
import { AppUser } from './models/app-user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private firestore: AngularFirestore) { }

  save( user: firebase.User) {
    this.firestore.collection('users').doc(user.uid).set({
      name: user.displayName,email: user.email
    });
  }

  //The error message is: Cannot find name 'FirebaSEObjectObservable'
  get(uid: string): FirebaSEObjectObservable<AppUser>{
    return this.firestore.collection('users').doc(uid);
  }
  
}

admin-auth-guard.service.ts =>这是另一个使我出错的组件

import { Injectable } from '@angular/core';
import { UserService } from './user.service';
import { AuthService } from './auth/auth.service';
import { CanActivate } from '@angular/router';
import { switchMap} from 'rxjs/operators';
import { map} from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class AdminAuthGuardService implements CanActivate{
  constructor(private auth: AuthService,private userService: UserService){
  }

  canActivate(): Observable<boolean>{
    return this.auth.user$
      //The error message is: Cannot find name "Property 'switchMap' does not exist on type 'Observable<User>'"
      .switchMap(user => (this.userService.get(user.uid))
      .map(appUser => appUser.isAdmin);
  }

}

App-user.ts

export interface AppUser{
    name: string;
    email: string;
    isAdmin: boolean;
}

app.module.ts

import { AdminordersComponent } from './admin/admin-orders/admin-orders.component';
import { AuthService } from './auth/auth.service';
import { UserService } from './user.service';
import { AngularFireModule } from '@angular/fire';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AuthGuardService } from './auth-guard.service';
import { AdminAuthGuardService } from './admin-auth-guard.service';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AdminProductsComponent,AdminordersComponent
  ],imports: [
    browserModule,AppRoutingModule,RouterModule.forRoot([

      {path: 'admin/products',component: AdminProductsComponent,canActivate: [AuthGuardService,AdminAuthGuardService]},{path: 'admin/orders',component: AdminordersComponent,AdminAuthGuardService]}
    ]),AngularFireModule.initializeApp(environment.firebase),AngularFireAnalyticsModule,AngularFirestoreModule,AngularFireAuthModule
  ],providers: [
    AuthService,AuthGuardService,UserService
  ],bootstrap: [AppComponent]
})
export class AppModule { }

firebase配置为：

解决方法

角度10和“ @ angular / fire”：“ ^ 6.0.2”

首先，您需要在导入中进行一些更改，

import { AngularFirestore,AngularFireObject} from '@angular/fire/firestore';

并将FirebaseObjectObservable更改为AngularFireObject

我共享一个链接，以获取更多详细信息。您可以看一下文档 https://github.com/angular/angularfire/tree/93912bc3e9e41d48628a8671c766b0c2e8b65dc8