angular - 我在 Angular Template Driven Form 中对这个路由守卫做错了什么？

Question

我想我会为这个项目实现一个路由保护，因为没有后端，它可能需要它，因为用户可能不知道数据会被重置。所以我按照这个网站提供的例子在这里，我似乎无法让它与我的项目一起工作。我不确定我忘了做什么。

我认为主要问题出在这个文件中：app.routing-module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserFormComponent } from './user-form/user-form.component';
import { DisplayDataComponent } from './display-data/display-data.component';
import { CanDeactivateGuard } from './can-deactivate/can-deactivate.guard';

const routes: Routes = [
    {
      path: '',
      component: UserFormComponent,
      canDeactivate: [CanDeactivateGuard]
    },
    {
      path: 'display-data',
      component: DisplayDataComponent
      canDeactivate: [CanDeactivateGuard]
    }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我在组件中导入了我需要的所有东西，这些组件有一个表单并有一个重定向到不同页面的按钮。

我也收到了一个错误

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