错误TS2355:声明类型既不是'void‘也不是'any’的函数必须返回一个值

Question

我使用角5中的auth保护来检查用户是否应该能够导航到特定的页面。我收到了一个与返回一个可观察到的错误有关的错误：

一个函数，其声明的类型既不是‘’也不是‘任意’，必须返回一个值.

这是我的authguard.ts

从‘@角/核心’导入{注入}；从‘@ Router /路由器’导入{路由器、CanActivate、ActivatedRoute、ActivatedRouteSnapshot、RouterStateSnapshot }；从CanActivate导入{ 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，我认为我在返回时犯了一个错误，但我还有点挣扎。任何帮助都将不胜感激。

Answer 1

这将解决你的问题。

您的问题是您没有返回任何内容，并且订阅了您的HTTP调用。相反，返回可观察到的自身，并使用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;
    }
  }));   
}; 

Answer 2

如果您查看CanActivate方法，它的返回类型是布尔型，应该是可观察的。此外，您也可以使用.map代替订阅，并在需要时返回可观察的内容。

希望这个能帮上忙。谢谢。