在Angular 6中编写保护程序以防止用户丢失表单数据,可以采取以下步骤:
下面是一个示例代码:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
<form [formGroup]="myForm">
<input formControlName="name" placeholder="Name">
<input formControlName="email" placeholder="Email">
</form>
`
})
export class FormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
}
}
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { FormComponent } from './form.component';
@Injectable()
export class FormGuard implements CanDeactivate<FormComponent> {
canDeactivate(component: FormComponent): Observable<boolean> | boolean {
if (component.myForm.dirty) {
return confirm('Are you sure you want to leave this page?');
}
return true;
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormComponent } from './form.component';
import { FormGuard } from './form.guard';
const routes: Routes = [
{
path: 'form',
component: FormComponent,
canDeactivate: [FormGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [FormGuard]
})
export class AppRoutingModule { }
在上述示例中,当用户修改表单数据但未提交时,尝试离开当前页面时会触发CanDeactivate守卫。如果表单数据已被修改,将弹出一个确认框询问用户是否要离开页面。如果用户确认离开,导航将继续进行;否则,导航将被取消。
请注意,上述示例中的代码仅为演示目的,实际应用中可能需要根据具体需求进行修改和扩展。
推荐的腾讯云相关产品:腾讯云服务器(https://cloud.tencent.com/product/cvm)和腾讯云数据库(https://cloud.tencent.com/product/cdb)可用于支持Angular应用的部署和数据存储。
领取专属 10元无门槛券
手把手带您无忧上云