类型 'boolean' 不可分配给类型 'ObservableInput<{}>'答案

【问题标题】：Type 'boolean' is not assignable to type 'ObservableInput<{}>'类型 'boolean' 不可分配给类型 'ObservableInput<{}>'
【发布时间】：2019-01-04 09:07:02
【问题描述】：

我正在从事 Angular 6 项目。我正在为我的 routeGuards 使用 canDeactivate 和一个弹出窗口来显示路由离开消息。但是问题出现在我的 price-list-guard-service on hover .flatMap(isAllow)=> {

错误：'(isAllow: boolean) => boolean' 类型的参数不可分配给'(value: boolean, index: number) => ObservableInput' 类型的参数..强>

我想在 price-list-guard.service.ts 中做这样的事情：

price-list-guard.service.ts

@Injectable()
export class PriceListFormGuard implements CanDeactivate<PriceListFormComponent> {
    constructor(private promptService: PromptService) { }

    canDeactivate(component: PriceListFormComponent):boolean {
        if (component.isDirty) {
            this.promptService.showPrompt('Warning', 'Unsaved changes detectect on the current page);
            this.promptService.callback.flatMap((isAllow) => {
                if (isAllow) {
                    return true;
                } else {
                    return false;
                }
            });
        }
    }
}

prompt-service.ts

@Injectable()
export class PromptService {
    title: string;
    message: string;
    display = 'none';
    callback: Subject<boolean>;

    constructor() {
        this.callback = new Subject<boolean>();
    }

    showPrompt(title: string, message: string): void {
        this.title = title;
        this.message = message;
        this.display = 'block';
    }

    close(confirm?: boolean): void {
        this.title = null;
        this.message = null;
        this.display = 'none';
        if (confirm != null) {
            this.callback.next(confirm);
        }
    }

【问题讨论】：

标签： angular rxjs angular-observable

【解决方案1】：

您的canDeactivate 方法返回类型是布尔值。但该方法看起来没有任何回报。所以试试下面的方法而不是你的方法

canDeactivate(component: PriceListFormComponent):boolean {
        // let retVal: boolean = true;
        if (component.isDirty) {
            this.promptService.showPrompt('Warning', 'Unsaved changes detectect on the current page);
           return this.promptService.callback.flatMap((isAllow) => {
                if (isAllow) {
                    return true;
                } else {
                    return false;
                }
            });
        }
     return false;
    }

【讨论】：

我试过你的代码，但是当鼠标悬停在 isAllow 参数 .flatMap((isAllow) => { Error: Argument of type '(isAllow: boolean) => boolean' is notassignable to '(value: boolean, index: number) => ObservableInput' 类型的参数。

【解决方案2】：

使用异步操作时不能返回布尔值。

改成这样：

canDeactivate(component: PriceListFormComponent):Observable<boolean> { // Return an observable
    if (component.isDirty) {
        this.promptService.showPrompt('Warning', 'Unsaved changes detectect on the 
        current page);
        return this.promptService.callback.asObservable();
    } else {
        return of(true);
    }
}

【讨论】：