角度上的错误:输入'boolean Observable<boolean>‘不能指定键入'boolean’

Question

查看这答案以了解该方法。我使用相同的解决方案来实现主保护，因为我有多个守护程序，并且希望按顺序执行它们。

主护卫中的 -

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'.

请查找相同的stackblitz链接

截图分享如下：

请分享您的解决方案，以消除此错误。任何帮助都是非常感谢的，提前感谢！

Answer 1

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

如果您在activateGuard服务中看到了MasterGuard ()，那么它就是对Promise<boolean>的期望。但是，在guard1服务中，您已经返回了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;

因此，保护可以是Guard1或Guard2类型之一，而且每个类都有不同的canActivate方法返回类型。一个是返回类型Observable<boolean>，另一个是Promise<boolean>。

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

您真的需要canActivate方法的Guard1和Guard2类有不同的返回类型吗？如果您可以保持返回类型保持一致，那么应该可以解决这个问题。

如果您的需求仍然具有不同的返回类型，那么在将保护分配给Guard2实例时，返回语句应该如下：

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