angular - 我在 Angular Template Driven Form 中对这个路由守卫做错了什么?
问题描述
我想我会为这个项目实现一个路由保护,因为没有后端,它可能需要它,因为用户可能不知道数据会被重置。所以我按照这个网站提供的例子在这里,我似乎无法让它与我的项目一起工作。我不确定我忘了做什么。
我认为主要问题出在这个文件中: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;
}
}
}
解决方案
推荐阅读
- c# - 如何云 两个泛型参数,一个用于规范,一个用于类型推断
- pandas - 数据透视表 pandas 的百分比计算
- asp.net-core-webapi - 当尝试获取传递给函数的表上存在的列时出现错误
- javascript - 如何在我的帐户文件中使用 firebase.auth 而无需再次初始化 firebase
- powershell - 按日期过滤的带有路径和总文件的目录列表
- html - 我应该以哪种方式设计网站的布局?
- node.js - 节点js中意外标记“(”附近的语法错误
- google-apps-script - Google GMAIL 在发送时添加检查附件
- c++ - 当我使用的教程完全没有错误时,为什么我的代码会出错?
- ffmpeg - ffmpeg m3u8 正确编码