错误 TS2322：将<boolean>角度从 6.2 更新到 7.2 后，无法将类型 'Observable<{}>' 分配给类型"可观察"

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：类型"可观察<{}>"不可分配给类型"可观察"。 类型"{}"不能分配给类型"布尔值"。 src/app/shared/guards/master.guard.ts(52,7(：错误 TS2322：类型"可观察<{}>"不可分配给类型"可观察"。

路由代码

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

Answer 1

问题出在函数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

编辑

新的堆栈闪电战链接，它的工作原理：

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