在 Angular 中出现错误：类型 'boolean | Observable<boolean>' 不可分配给类型 'boolean'

Question

检查this答案以了解方法。我正在使用相同的解决方案来实现 master guard，因为我有多个 guard 并且想按顺序执行它们。

法师守卫中-

return guard.canActivate(this.route, this.state);

整个函数说明如下：

//Create an instance of the guard and fire canActivate method returning a promise
    private activateGuard(guardKey: string): Promise<boolean> {

        let guard: Guard1 | Guard2 | Guard3 | Guard4;

        switch (guardKey) {
            case GUARDS.GUARD1:
                guard = new Guard1();
                break;
            case GUARDS.GUARD2:
                guard = new Guard2();
                break;
            case GUARDS.GUARD3:
                guard = new Guard3();
                break;
            case GUARDS.GUARD4:
                guard = new Guard4(this._Guard4DependencyService);
                break;
            default:
                break;
        }
        return guard.canActivate(this.route, this.state);
    }

我收到下面提到的错误：

Type 'boolean | Observable<boolean>' is not assignable to type 'boolean'.
  Type 'Observable<boolean>' is not assignable to type 'boolean'.

相同

请找stackblitzlink

截图分享如下：请分享您的解决方案以消除此错误。提前感谢任何帮助！

Answer 1

我现在看到你的问题了。 guard1 服务和 guard2 服务有两种不同的 return 类型。根据 MasterGuard 服务代码，您需要将两个 return 类型都设为 Promise<boolean>。

如果您在 MasterGuard 服务中看到 activateGuard()，那么它需要 Promise<boolean>。但是，在 guard1 服务中，您 returned Observable<boolean>.

guard1.service.ts :

@Injectable()
export class Guard1 implements CanActivate, CanActivateChild {
  
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-1');
    return Promise.resolve(true)   // Modified this part
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

guard2.service.ts :

@Injectable()
export class Guard2 implements CanActivate, CanActivateChild {
  
  constructor() {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-2');
    return Promise.resolve(true);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

工作代码：https://stackblitz.com/edit/angular-route-guards-9tzxmv

问题是因为这一行：

switch (guardKey) {
  case GUARDS.GUARD1:
    guard = new Guard1(this._Router);   // because of this line it was creating issue
    break;
  case GUARDS.GUARD2:
    guard = new Guard2();
    break;
  default:
    break;
}

Answer 2

根据共享的 stackblitz 代码，guard 定义为：

    let guard: Guard1 | Guard2;

因此 guard 可以是 Guard1 或 Guard2 类型，并且每个 class 都有不同的 canActivate 方法 return 类型.一个有 return 类型 Observable<boolean>，而另一个有 Promise<boolean> .

return guard.canActivate(this.route, this.state);语句可以是returnObservable<boolean>或Promise<boolean>，而包含return语句的函数定义为return Promise<boolean>.

你真的需要 Guard1 和 Guard2 class 的 canActivate 方法来拥有不同的 return 类型吗？如果您可以使 return 类型保持一致，那么应该可以解决问题。

如果您的要求仍然是具有不同的 return 类型，那么如果将 guard 分配给 Guard2 实例，return 语句应为：

    return guard.canActivate(this.route, this.state).toPromise();

在 Angular 中出现错误：类型 'boolean | Observable<boolean>' 不可分配给类型 'boolean'

Getting error in Angular: Type 'boolean | Observable<boolean>' is not assignable to type 'boolean'

typescript

angular-ui-router

angular