Question

我在Angular 7应用中建立了2条路线，

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

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

问题是，每当我从/view路线或ViewComponent转到/create路线或CreateComponent时，其中的所有表单字段前一个组件（即ViewComponent）返回到初始状态（我通过再次返回到/create路由来对其进行检查），换句话说，表单字段自动重置，如果我从从/view路由到/create的路由，/view中的所有表单字段均通过角度自动重置。

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

谢谢

Answer 1

这里要注意的主要事情是，当您移走销毁的角度分量然后向后导航时，它会重新创建。有几种维护组件数据的方法。

Use services用于存储数据并在再次初始化组件时重新使用-
将数据存储在本地存储中，并在再次初始化组件时重新使用
RouteReuseStrategy。这提供了重用角度分量的机制。请注意，这不适用于兄弟路由器出口。可能是，我无法使其适用于同级路线。您可以参考我先前与实现RouteReUseStrategy

Answer 2

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

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

每当您重新加载该组件时，第一个被称为ngOnInIt（）的Lifecycle钩子{} 因此您的表单将再次被初始化，将firstName和lastName的值存储为null。

解决方案：创建一个新的类

export class User {
firstName: string,
lastName: string

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

使用“上级”来创建反应性控件。如果您已将用户数据存储在某个地方，则可以通过服务获取该数据，请创建一个新用户并将其传递给控件。

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字段，它将添加到用户，否则将其设置为空字符串。

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

如何在Angular的惰性加载模块中保持表单状态？

2 个答案: