angular - 有没有办法通过继承来重用表单组件？

Question

亲爱的 Stackoverflow 用户，

我还没有看到关于这个问题的任何例子，但我应该先提一下我的计划。

我有三个不同的页面，它们基本上共享许多 FormGroup。它们的差异基本上很小，可能只有一两个 FormControl。当然，我基本上可以只复制粘贴整个组件并只添加我需要的控件，但我觉得这是一个相当不切实际且困惑的解决方案。我将如何正确处理这个问题？一般来说，关于 Angular 中的继承有什么好的资源吗？官方页面似乎没有提及我在英雄类(class)中看到的内容。

Answer 1

我不知道为什么我认为它并不像我想象的那么简单。首先，我创建了一个 FormBuilder 类，它设置了我使用的所有其他表单之间共享的所有控件。现在，任何扩展 FormBuilder 类的组件都能够创建这样的表单。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Form } from '../form';

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.scss']
})
export class InvoicesComponent extends FormBuilder {

  constructor() { 
    super()

    this.createForm();
  }
}

所以，我需要的 FormControls 可以很容易地通过添加

this.queryForm.addControl('newControl', new FormControl(''))

因此组件的 html 代码几乎不需要任何更改。