gpt4 book ai didi

angular - 未捕获( promise ): TypeError: component. canDeactivate 不是函数

转载 作者:太空狗 更新时间:2023-10-29 19:32:07 27 4
gpt4 key购买 nike

我在构建我的 CanDeactivateGuard 时遇到此错误。

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

我想让我的 CanDeactivateGuard 可以重复使用,所以它应该是通用的。

为此,我构建了一个名为 ComponentCanDeactivate 的抽象类,然后在 TreeCanDeactivateGuard 中对其进行了扩展。

然后 CanDeactivateGuard 应该实现接口(interface) CanDeactivate

我的代码:

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;
}
}

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;
}
}

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;
}
}

路线模块:

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

最佳答案

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

您不希望 TreeCanDeactivateGuard 扩展 ComponentCanDeactivate,您希望 TreeComponent 扩展 ComponentCanDeactivate

让任何组件扩展 ComponentCanDeactivate 并实现 canDeactivate 然后你就可以使用通用守卫 CanDeactivateGuard 了。

你也可以替换:

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

With: return confirm('你有未保存的更改!如果你离开,你的更改将会丢失。');

关于angular - 未捕获( promise ): TypeError: component. canDeactivate 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53870294/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com