如何在 Angular 的延迟加载模块中保持表单状态？答案

【问题标题】：How do I keep form state in Lazy Loading Module of Angular?如何在 Angular 的延迟加载模块中保持表单状态？
【发布时间】：2018-12-20 01:23:01
【问题描述】：

我在 Angular 7 应用程序中构建了 2 条路线，

{
    path: 'create',
    component: CreateComponent
},
{
    path: 'view',
    component: ViewComponent
}

它们都是延迟加载，在CreateComponent 中有一个表单，其中包含许多表单字段，同样的事情发生在ViewComponent。

问题是，每当我从/create 路由或CreateComponent 转到/view 路由或ViewComponent 时，前一个组件内的所有表单字段（即ViewComponent）被返回到初始状态（我通过再次返回/create 路由来检查它），换句话说，表单字段自动重置，如果我从/view 路由转到/create 路由，也会发生同样的事情，所有/view 中的表单字段由 Angular 自动重置。

那么，如何解决这个问题呢？如果我更改或转到其他路线，我希望所有表单字段保持其先前的值（即使尚未提交表单）。

谢谢，

【问题讨论】：

标签： javascript angular typescript lazy-loading

【解决方案1】：

这里要注意的主要事情是，当您导航离开已损坏的角度组件然后导航回来时，它会再次重新创建。有几种方法可以维护组件数据。

Use services 存储数据并在组件再次初始化时重用 -
将数据存储在本地存储中，并在组件再次初始化时重复使用
RouteReuseStrategy。这提供了重用角度组件的机制。请注意，这不适用于兄弟路由器插座。可能是，我无法使其适用于兄弟路线。可以参考我之前关于实现RouteReUseStrategy的回答

【讨论】：

【解决方案2】：

这与延迟加载无关，例如，假设您在表单中使用反应式控件，

userForm: FormGroup
constructor (private fb: FormBuilder) {}
ngOnInIt() {
 this.userForm = this.fb.group({
 firstName: [null, Validators.required],
 lastName: [null, Validators.required]
});
}

当你重新加载这个组件时，第一个被调用的生命周期钩子是 ngOnInIt() {} 因此您的表单将再次重新初始化，将 firstName 和 lastName 的值存储为 null。

解决方案：创建一个新类

export class User {
firstName: string,
lastName: string

constructor (data) {
  this.firstName = data.firstName ? data.firstName : '';
  this.lastName = data.lastName ? data.lastName : '';
 }
}

使用 Above Class 创建一个反应式控件。如果您已将用户数据存储在某处，请通过服务获取它创建一个新用户并将其传递给控件。

userForm: FormGroup
user: User
constructor(private someService: SomeService, private fb: FormBuilder) {}

ngOnInIt() {
 //get User some random function which makes an api call and fetches user data 
 //if available else returns {} 
 this.someService.getUser((res) => {
  this.user = new User(res);
  this.createForm();
 });
}

createForm() {
 this.userForm = this.fb.group({
  firstName: [this.user.firstName, Validators.required],
  lastName: [this.user.lastName, Validators.required]
})
}

//with user = new User(res); 如果其中有 res.firstName 字段，它将添加到用户，否则将其设置为空字符串。

希望这会有所帮助，这应该可以解决问题

【讨论】：