Question

我正在尝试使用resolver在加载配置文件页面之前预加载用户的配置文件。但是我得到了错误

类型'Promise'不能分配给类型'Observable'

这是我当前代码的样子

profile.service.ts

import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';

import { AuthenticateService } from './../auth/authenticate.service';

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

  constructor(public authService: AuthenticateService, private afs: AngularFirestore) { }

  findUserProfile(id: string) {
    console.log('User ID to search for is: ' + id);

    return this.afs.collection('profiles').doc(id).ref.get().then(doc => {
      return doc.data();
    });
  }
}

profile-resolver.service.ts

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

import { ProfileService } from './profile.service';
import { AuthenticateService } from 'src/app/auth/authenticate.service';
import { Observable } from 'rxjs';
import { Profile } from './profile';

@Injectable({
  providedIn: 'root'
})
export class ProfileResolverService {
  profile: Profile;

  constructor(private ps: ProfileService, private router: Router, private authService: AuthenticateService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    if (this.authService.user != null) {
      const userId = this.authService.user.uid;

      return this.ps.findUserProfile(userId);
    }
  }
}

我正在 profile.module.ts 中使用解析器，将解析器发布为这样的路由

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ProfilePage } from './profile.page';

import { ProfileResolverService } from './../profile-resolver.service';

const routes: Routes = [
  {
    path: '',
    component: ProfilePage,
    resolve: {
      userProfile: ProfileResolverService
    }
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ProfilePage],
  providers: [ProfileResolverService]
})
export class ProfilePageModule { }

不幸的是，我的代码抛出了无法将Type Promise分配为类型“ Observable”

我为什么做错了以及如何解决它。

Answer 1

我可以通过将可观察的类型从Profile更改为any来解决此问题。由于某些原因，我仍然试图找出原因，Profile类引入了一个错误。这就是我正在使用的解析器代码的样子

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticateService } from './../../auth/authenticate.service';
import { ProfileService } from '../profile.service';

@Injectable({
  providedIn: 'root'
})
export class ProfileResolverService implements Resolve<any> {

  constructor(private profileService: ProfileService, public authService: AuthenticateService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    if (this.authService.user != null) {
      const userId = this.authService.user.uid;
      return this.profileService.findUserProfile(userId);
    }
  }
}

如果您发现我做不正确的事情，请发表评论，以便我进行审核。

类型'Promise <documentdata>'不可分配给类型'Observable <profile>'

1 个答案: