錯誤TS2355：聲明的類型既不是“ void”也不是“ any”的函數必須返回一個值

Question

我正在用角度5中的身份驗證保護功能來檢查用戶是否應該能夠導航到特定頁面。 我收到與返回可觀察值有關的錯誤：

聲明類型既不是“ void”也不是“ any”的函數必須返回一個值。

這是我的authguard.ts

從“ @ angular / core”導入{可注射}； 從'@ angular / router'導入{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的新手，我認為我在返回可觀察值方面犯了一個錯誤，但我仍在掙扎。 任何幫助，將不勝感激。

Answer 1

這樣可以解決您的問題。

您的問題是您沒有返回任何內容，並且正在訂閱HTTP調用。 相反，返回Observable本身，並在您的HTTP調用之后使用pipe(map(...))執行操作，而不會像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方法，其返回類型為boolean，則應為Observable。 同樣，除了訂閱之外，還可以使用.map並根據需要返回Observable。

希望這可以幫助。 謝謝。