在构造函数中使用FormBuilder不好吗？

Question

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: ''
    });
  }
}

Answer 1

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

根据OnInit的角度文档，它用于

• 在构造后不久执行复杂的初始化。
• 要在Angular设置输入属性之后设置组件。

因此，在ngOnInit lifeycle钩子上执行诸如数据提取和初始化Formbuilder之类的逻辑会更干净。

[您应该查看Angular团队负责人Misko Hevery的这份post，他概述了保持构造函数整洁的多种原因。

Answer 2

在构造函数中注入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) { }
}
请参见Angular Stackblitz Demo