Angular doc here,您会看到下面的实现方式。即,在formBuilder
内声明constructor()
和服务。我知道在constructor()
内部使用服务是一种不良做法。也就是说,我们需要为此使用ngOnInit()
。但是我也使用constructor()
来声明formBuilder
属性。这是太糟糕的做法吗?我也需要为此使用ngOnInit()
吗?页面创建会一直持续到formBuilder
创建之后吗?
export class CartComponent {
items;
checkoutForm;
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {
this.items = this.cartService.getItems();
this.checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
}
}
答案 0 :(得分:3)
简短的回答,是的,您应该将大多数初始化逻辑留在ngOnInit
生命周期挂钩中。
根据OnInit的角度文档,它用于
- 在构造后不久执行复杂的初始化。
- 要在Angular设置输入属性之后设置组件。
因此,在ngOnInit
lifeycle钩子上执行诸如数据提取和初始化Formbuilder之类的逻辑将更为简洁。
您应该查看Angular团队负责人Misko Hevery的post,他概述了保持构造函数整洁的多种原因。
答案 1 :(得分:0)
FormBuilder
在FormBuilder
中注入constructor
是推荐的最佳实践,因为Angular使用构造函数注入模式。
FormBuilder
是否在constructor
或ngOnInit
生命周期挂钩中初始化反应形式在很大程度上取决于优先事项。但是为了保持代码整洁,将初始化逻辑重构为ngOnInit
(或其他方法)是一个好主意。
关于ngOnInit
的时间安排,文档指出:
[{
ngOnInit
是一种]回调方法,在默认更改检测器首次检查指令的数据绑定属性之后,以及在任何视图或内容之前 ,立即调用对孩子进行了检查 。实例化指令后,它仅被调用一次。
因此,将在加载页面视图之前在ngOnInit
中初始化表单。
Reactive Forms的官方Angular文档按如下所示初始化表格:
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
aliases: this.fb.array([
this.fb.control('')
])
});
get aliases() {
return this.profileForm.get('aliases') as FormArray;
}
constructor(private fb: FormBuilder) { }
}