时间戳

首页 > 解决方案 > Angular 10 中 FirebaseObjectObservable 和 CanActivate 的问题

angular - Angular 10 中 FirebaseObjectObservable 和 CanActivate 的问题

问题描述

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

我们正在做一个练习，我们正在做一个购物车网站，我正在做一个管理员用户，因此，它只能具有普通用户不能访问的权限。我制作了它的组件和服务，但显然讲师使用的程序版本与当前版本的 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);
  }

}

应用用户.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, canActivate: [AuthGuardService, AdminAuthGuardService]}
    ]),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    AuthService,
    AuthGuardService,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

火力基地配置是： 在此处输入图像描述

标签： angularangular10

解决方案

Angular 10 和“@angular/fire”：“^6.0.2”

首先你需要在你的导入中改变一些东西，

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

并更改FirebaseObjectObservable为AngularFireObject

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

推荐阅读