未捕获(承诺):TypeError:component.canDeactivate不是函数 [英] Uncaught (in promise): TypeError: component.canDeactivate is not a function

问题描述

构建 CanDeactivateGuard 时出现此错误.

未捕获(承诺):TypeError:component.canDeactivate不是函数

我想让我的 CanDeactivateGuard 可重用，所以应该是通用的.

因此，我建立了一个名为 ComponentCanDeactivate 的抽象类，然后在 TreeCanDeactivateGuard 中对其进行了扩展.

然后， CanDeactivateGuard 应该实现接口 CanDeactivate .

我的代码:

 从'@ angular/core'导入{HostListener};导出抽象类ComponentCanDeactivate {公共抽象canDeactivate():布尔值；@HostListener('window:beforeunload'，['$ event'])unloadNotification($ event:any){如果(！this.canDeactivate()){$ event.returnValue = true;}} 

}

TreeCanDeactivateGuard :

  import'./canDeactivate/component-can-deactivate'中的{ComponentCanDeactivate};从"../tree/node.service"导入{NodeService}；导出抽象类TreeCanDeactivateGuard扩展了ComponentCanDeactivate {构造函数(专用_nodeService:NodeService){极好的();}public canDeactivate():布尔{如果(this._nodeService.treeChangesTracer ===否){返回true；} 别的 {返回false；}} 

}

CanDeactivateGuard :

 从'@ angular/core'导入{可注入}；从"@ angular/router"导入{CanDeactivate}；从'./component-can-deactivate'导入{ComponentCanDeactivate};@Injectable()导出类CanDeactivateGuard实现CanDeactivate< ComponentCanDeactivate>{constructor(){}canDeactivate(component:ComponentCanDeactivate):boolean {如果(！component.canDeactivate()){if(confirm('您有未保存的更改！如果您离开，则更改将丢失.')){返回true；} 别的 {返回false；}}返回true；}} 

路由模块:

  const路由:路由= [{路径:"，组件:TreeComponent，canDeactivate:[CanDeactivateGuard]，runGuardsAndResolvers:始终"，}] 

解决方案

什么是 TreeCanDeactivateGuard ?在您的代码中的任何地方都没有引用它.

您不希望 TreeCanDeactivateGuard 扩展 ComponentCanDeactivate ，而是希望 TreeComponent 扩展 ComponentCanDeactivate ./p>

使任何组件扩展 ComponentCanDeactivate 并实现 canDeactivate ，然后就可以为其使用通用防护 CanDeactivateGuard .

您还可以替换:

  if(confirm('您有未保存的更改！如果离开，您的更改将丢失.')){返回true；} 别的 {返回false；} 

使用:返回确认(您有未保存的更改！如果离开，您的更改将丢失.")

I have this error when I build my CanDeactivateGuard .

Uncaught (in promise): TypeError: component.canDeactivate is not a function

I want to make my CanDeactivateGuard reusable, so it should be generic.

therefor I've built an abstract class which called ComponentCanDeactivate and then extended it in the TreeCanDeactivateGuard.

The CanDeactivateGuard should then implement the interface CanDeactivate.

My Code:

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

export abstract class ComponentCanDeactivate {

  public abstract canDeactivate(): boolean;

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

}

The TreeCanDeactivateGuard :

import { ComponentCanDeactivate } from './canDeactivate/component-can-deactivate';
import { NodeService } from '../tree/node.service';


export abstract class TreeCanDeactivateGuard extends ComponentCanDeactivate {

    constructor(private _nodeService: NodeService) {
    super();
    }

    public canDeactivate(): boolean {
      if (this._nodeService.treeChangesTracer === false) {
          return true;
       } else {
          return false;
      }
}

}

The CanDeactivateGuard:

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

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

        constructor() { }
         canDeactivate(component: ComponentCanDeactivate): boolean {

            if (!component.canDeactivate()) {
                if (confirm('You have unsaved changes! If you leave, your changes will be lost.')) {
                    return true;
                } else {
                    return false;
                }
            }
            return true;
        }
    }

Routes Module :

const routes: Routes = [
{
    path: '', component: TreeComponent, canDeactivate: [CanDeactivateGuard] , runGuardsAndResolvers: 'always',
}]

解决方案

What is TreeCanDeactivateGuard? It isn't referenced anywhere in your code.

You don't want TreeCanDeactivateGuard to extend ComponentCanDeactivate, you want TreeComponent to extend ComponentCanDeactivate instead.

Make any component extend ComponentCanDeactivate and implement canDeactivate then you'll be able to use the generic guard CanDeactivateGuard for it.

You could also replace:

if (confirm('You have unsaved changes! If you leave, your changes will be lost.')) {
   return true;
} else {
   return false;
}

With: return confirm('You have unsaved changes! If you leave, your changes will be lost.');

这篇关于未捕获(承诺):TypeError:component.canDeactivate不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！