错误 TS2355：声明类型既不是“void”也不是“any”的函数必须返回一个值

Question

我正在使用 Angular 5 中的身份验证保护来检查用户是否应该能够导航到特定页面。我收到与返回 observable 相关的错误：

声明类型既不是“void”也不是“any”的函数必须返回一个值。

这是我的 authguard.ts

从 '@angular/core' 导入 { Injectable }； 从'@angular/router'导入{路由器，CanActivate，ActivatedRoute，ActivatedRouteSnapshot，RouterStateSnapshot}； 从 '../../service/application-verification.service' 导入 { ApplicationVerificationService };

@Injectable() export class AppStatusGuard implements CanActivate {

  applicationId: number;   personId: number;

  constructor(
    public router: Router,
    public readonly activeRoute: ActivatedRoute,
    public readonly applicationVerificationService: ApplicationVerificationService) { }

  loginRoute: boolean;   memberRoute: boolean;


  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    this.applicationId = Number(route.params["applicationId"]);
    this.personId = Number(route.params["personId"]);

    // Make sure they are allowed on this page, if not re-direct
    const url = this.applicationVerificationService.getRouteForFellowshipApplicant(this.personId, this.applicationId)
      .subscribe((res: string) => {
        console.log(url);

        if (res !== `application-status/${this.personId}/${this.applicationId}`) {
          console.log("failure");
          // this.router.navigateByUrl(url);
          return false;
        } else {
          console.log("success");
          //this.router.navigateByUrl(url);
          return true;
        }
      });   
  }; 
};

这是我的验证服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ApplicationVerificationService {
  constructor(
    private readonly httpClient: HttpClient,
    private readonly router: Router) { }

  getRouteForFellowshipApplicant(personId, applicationId): Observable<string> {
    this.httpClient.get('api/application-verification/' + personId).subscribe((responseObject: IFellowshipApplicationStatus) => {

      return Observable.create(observer => {

        if (responseObject.preApplicationVerificationStatus === 'GoToTrackerPage') {
          observer.next('application-status/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GoToApplicationFormPage') {
          observer.next('application-form/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GoToContactIceForInfoPage') {
          observer.next('contact-us/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GenericError') {
          observer.next('application-error/' + personId);
        }
        observer.complete();
      });
    });
    return null;
  }
}

我是 rxjs 的新手，我认为我在返回 observable 的方式上犯了一个错误，但我有点挣扎。任何帮助将不胜感激。

Answer 1

如果你看一下 CanActivate 方法，它的返回类型是布尔值，它应该是 Observable。 此外，如果需要，您可以使用 .map 并返回 Observable，而不是订阅。

希望，这会有所帮助。谢谢。

Answer 2

这将解决您的问题。

您的问题是您没有返回任何内容，而是订阅了您的 HTTP 调用。相反，返回 Observable 本身，并使用 pipe(map(...)) 在 HTTP 调用之后执行操作，而不会像 subscribe 那样中断操作链。

return this.applicationVerificationService.getRouteForFellowshipApplicant(this.personId, this.applicationId)
  .pipe(map(res => {
    console.log(url);

    if (res !== `application-status/${this.personId}/${this.applicationId}`) {
      console.log("failure");
      // this.router.navigateByUrl(url);
      return false;
    } else {
      console.log("success");
      //this.router.navigateByUrl(url);
      return true;
    }
  }));   
};