angular - 错误 TS2322：类型 'Observable<{}>' 不可分配给类型 'Observable', 将角度从 6.2 更新到 7.2 后

Question

import { of as observableOf, Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { Injectable, Injector } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';

@Injectable()
export class MasterGuard implements CanActivate, CanActivateChild {
  constructor(private readonly injector: Injector) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (next.data.guards.canActivate && next.data.guards.canActivate.length > 0) {
      return this.executeGuardsCanActivate(next.data.guards.canActivate, next, state);
    } else {
      return true;
    }
  }

  executeGuardsCanActivate(guards, next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let start = observableOf(true);
    guards.forEach(guard => {
      start = start.pipe(
        mergeMap(x => {
          if (x) {
            return this.injector.get(guard).canActivate(next, state);
          } else {
            return observableOf(false);
          }
        })
      );
    });

    return start;
  }
}

以上是从 6 到 7 的角度更新后编译时引发错误的代码。有什么帮助吗？

src/app/shared/guards/master.guard.ts(35,7) 中的错误：错误 TS2322：类型“Observable<{}>”不可分配给类型“Observable”。类型“{}”不可分配给类型“布尔”。src/app/shared/guards/master.guard.ts(52,7)：错误 TS2322：类型 'Observable<{}>' 不可分配给类型 'Observable'。

路由代码

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [MasterGuard],
    data: {
      guards: {
        canActivate: [AuthGuard, UserInformationGuard]
      }
    }
  },

标签： angulartypescriptrxjs

Answer 1

问题出在 function 内部executeGuardsCanActivate，而这一行就是问题所在：

return this.injector.get(guard).canActivate(next, state);

请尝试以下方法：

return observableOf(this.injector.get(guard).canActivate(next, state));

这是 Angular 9 中的示例代码，但我相信它也应该适用于 Angular 7： https ://stackblitz.com/edit/angular-ivy-mn4h3p?file=src%2Fapp%2Fapp.service.ts

编辑

有效的新 stackblitz 链接：

https://stackblitz.com/edit/angular-ivy-mccbhk?file=src%2Fapp%2Fapp.service.ts