Angular 有没有办法通过继承重用表单组件？

亲爱的Stackoverflow用户：

我没有看到任何关于这个问题的例子，但我可能应该首先提到我的计划

---

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

您可以通过内容投影来实现

假设您有一个带有两个输入的FormGroup组件。该组件还将具有

ng内容

，以便其他组件可以注入它们自己的html

@Component({
    selector: 'my-form-group',
    template: `
        Type something : <input type="text"/> 
        Select something: <select> ... </select>
        Insert your own stuff: <ng-content></ng-content>
    `
})
export class FormGroupComponent {}

@Component({
    selector: 'my-form-group-radio',
    template: `
        <my-form-group>
             <input type="radio" name="myOption" value="1" />
             <input type="radio" name="myOption" value="2" />
        </my-form-group>
    `
})
export class FromGroupRadioComponent {}

@组件({
选择器：“我的表单组”，
模板：`
键入以下内容：
选择某物：。。。
插入您自己的内容：
`
})
导出类FormGroupComponent{}
@组成部分({
选择器：“我的表单组收音机”，
模板：`
`
})
从GroupRadioComponent{}导出类

---

通过这种方式，您可以根据需要多次重用

FormGroupComponent

。您可以创建不同类型的组件并投影不同的内容。

我不知道为什么我会认为它不像我想象的那么简单。 首先，我创建了一个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代码几乎不需要任何更改

虽然这似乎是一种有趣的方法，但这并不是我所需要的，因为我看到了现场验证的问题。我找到了一个更适合自己的解决办法。我把表格抽象成一个单独的类。使用这个特定类的每个组件都可以简单地构建表单，并根据需要添加其他控件。HTML上的更改保持最小，而组件仍然非常小且可读。我也不认为这是最好的做法，但我也必须让我的同事们暂时保持尽可能简单的做法，因为我自己缺乏专业知识。