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

【问题标题】：Getting error in Angular: Type 'boolean | Observable<boolean>' is not assignable to type 'boolean'在 Angular 中出现错误：键入 'boolean | Observable<boolean>' 不可分配给类型 'boolean'
【发布时间】：2021-12-31 05:10:33
【问题描述】：

结帐this 回答以了解该方法。我正在使用相同的解决方案来实现主守卫，因为我有多个守卫并希望按顺序执行它们。

在大师卫队中 -

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 链接

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

【问题讨论】：

如果guard.canActivate() 返回布尔值，您可以简单地将返回类型添加为布尔值。private activateGuard(guardKey: string): Promise<boolean> | boolean
嗨@DevangPatel 我尝试了你的建议，但错误仍然存在：键入'boolean |承诺 | Observable' 不可分配给类型 'boolean |承诺'。类型 'Observable' 不可分配给类型 'boolean |承诺'。类型 'Observable' 缺少类型 'Promise' 的以下属性：然后，catch，finally，[Symbol.toStringTag]
你能在 stackblitz 上分享代码吗？
@DevangPatel: stackblitz.com/edit/angular-route-guards-zkcvpm?file=src/app/… 也在问题中添加
只需将函数的返回类型更改为boolean | Promise<boolean>，Angular Guards 两者都接受。

标签： angular typescript angular-ui-router

【解决方案1】：

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

如果您在 MasterGuard 服务中看到 activateGuard()，那么它期待的是 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;
}

【讨论】：

【解决方案2】：

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

    let guard: Guard1 | Guard2;

所以guard 可以是Guard1 或Guard2 类型中的任何一个，并且每个类都有不同的canActivate 方法返回类型。一个返回类型为Observable<boolean>，而另一个返回类型为Promise<boolean>。

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

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

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

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

【讨论】：