在构造函数中使用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