这两个概念本身并没有直接的联系。app-routing.module 是 Angular 中用于路由管理的模块,主要用于配置应用路由和相关的组件。*ngModel 是 Angular 中用于双向数据绑定的指令,主要用于将用户在视图中输入的数据与组件中的属性绑定起来。
如果要实现在路由切换时保留表单里的数据,可以通过以下步骤实现:
public formData = {
name: '',
email: ''
};
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'form', component: FormComponent, canActivate: [FormGuard], canDeactivate: [FormGuard] }
];
export class FormGuard implements CanActivate, CanDeactivate {
canActivate(): boolean {
// 判断表单是否已填写完成
if (this.form.hasData()) {
return true;
} else {
// 路由跳转到表单页面
this.router.navigate(['/form']);
return false;
}
}
canDeactivate(component: Component): boolean {
// 判断表单是否已保存
if (this.form.isSaved()) {
return true;
} else {
// 弹出警告框提示用户保存表单数据
return confirm('Are you sure you want to leave?');
}