在构造函数中使用FormBuilder是一种不良实践吗？

Question

在这里查看Angular文档，您可以看到以下实现方式。即在constructor()中声明formBuilder和服务。我知道在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: ''
    });
  }
}

- Sampath

---

ngOnInit() 是最合适的地方。表单构建器创建前页面创建会被暂停吗？ -- 是的，但在您的情况下，这种等待是可以忽略不计的。 - Nicholas K

Answer 1

简短回答，是的，您应该将大部分初始化逻辑留在ngOnInit生命周期钩子中。

根据 Angular 文档中对于OnInit的描述，它被用于:

• 在构建之后进行复杂的初始化操作。
• 在 Angular 设置输入属性之后设置组件。

因此，在ngOnInit生命周期钩子中执行数据获取和表单构建器的初始化等逻辑会更加清晰。

您可以参考由 Angular 团队负责人 Misko Hevery 撰写的帖子，他概述了保持构造函数清晰的多个原因。

- wentjun

---

这不是真的，这个答案是错误的。使用表单构建器来定义一个表单并不是一种复杂的初始化操作。而且你所引用的帖子并没有说我们应该保持构造函数为空。这个帖子本身甚至与Angular无关。 - Елин Й.

Answer 2

在构造函数中注入FormBuilder

在constructor中注入FormBuilder是推荐的最佳实践，因为Angular使用构造函数注入模式。

在构造函数中使用FormBuilder

在constructor或ngOnInit生命周期钩子中初始化响应式表单，很大程度上取决于个人喜好。但为了保持代码整洁，将初始化逻辑重构到ngOnInit（或其他方法）中是一个好主意。

关于ngOnInit的时间问题，文档中指出：

[ngOnInit是一个]回调方法，在默认变更检测器首次检查指令的数据绑定属性之后立即调用，并且在任何视图或内容子级被检查之前。它只在指令实例化时调用一次。

因此，在ngOnInit中初始化表单将在页面视图加载之前发生。

---

官方的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) { }
}

请查看Angular Stackblitz演示

- Christopher Peisert