从抽象基类继承角组件-“不是函数”错误

问题描述

我可能正在问一个已经posted question的人。但是，由于它没有帮助我，因此我将其重新发布。

因此，我遵循this article的方法来实现通用的Route Guard，尽管调用了Route Guard，但它给我一个错误“未捕获（承诺）：TypeError：component.canDeactivate不是函数” ”，因为它尝试调用canDeactivate（）方法。

下面是我的代码。为了简洁起见，我仅按代码粘贴摘录。

shared.module.ts：

providers: [CanDeactivateGuard]

component-can-deactivate.ts

import { HostListener } from "@angular/core";

export abstract class ComponentCanDeactivate {

    abstract canDeactivate(): boolean;

    @HostListener('window:beforeunload',['$event'])
    unloadNotification($event: any) {
        if (!this.canDeactivate()) {
            $event.returnValue = true;
        }
    }
}

form-can-deactivate.ts：

import { ComponentCanDeactivate } from '../can-deactivate/component-can-deactivate';
import { FormGroup,} from "@angular/forms";

    export abstract class FormCanDeactivate extends ComponentCanDeactivate {

    abstract get form(): FormGroup;

    canDeactivate(): boolean {
        return !this.form.dirty;
    }
}

can-deactivate.guard.ts：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { ComponentCanDeactivate } from './component-can-deactivate';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {

    canDeactivate(component: ComponentCanDeactivate): boolean {
        if (!component.canDeactivate()) {
            return confirm("You have unsaved changes! If you leave,your changes will be lost.");
        }
        return true;
    }
}

fixed-deposits-form.component.ts

export class FixedDepositsFormComponent extends FormCanDeactivate implements OnInit {

    get form(): FormGroup {
        return this.fixedDepositsFormGroup;
    }
}

我得到的错误是：

如果有人能帮助我找到问题所在，或者是否有更好的方法来做我正在做的事情，真的很感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）