Angular 使用指令将表单输入添加到组件

我有一个单独的组件来处理表单输入。该组件负责表单的验证和模板，然后在有效时将表单数据传递给其父组件。我正在我的应用程序中的许多其他模块中共享此组件，这些模块分担相同的责任。不过现在我已经到了一个点，表单的输入将发生微小的变化。所以我想也许我可以在这种情况下使用指令。我就是这么想的

现在，组件是这样的

<search-form
    (onSubmit)=submitEvent...
    (onClear)=clearEvent...></search-form>

然后模板有6个输入字段。但是如何将这6个输入字段转换为指令呢？这样我就可以把上面的内容变成

<search-form
    firstName
    lastName
    dateOfBirth
    (onSubmit)=...
    (onClear)=...></search-form>

或者，也许没有什么好办法可以做到这一点；因此，我认为这不是适合这项工作的工具。但是，根据您的目标，使用子组件可能是一种解决方案。此外，使用子组件是一种更像组件的方式，可以使事情更可读、更容易理解

<search-form (onSubmit)="submitEvent($event)" (onClear)="clearEvent($event)">
    <search-field name="firstName"></search-field>
    <search-field name="lastName"></search-field>
    <search-field name="dateOfBirth"></search-field>
</search-form>

import { Component, ContentChildren, QueryList, Input } from '@angular/core';

@Component({
  selector: 'search-field',
  template: ``
})
export class SearchFieldComponent {
  @Input('name') name: string;
}

@Component({
  selector: 'search-form',
  template: `
    <div *ngFor="let field of fields">
      <label [for]="field.name">{{ field.name }}</label>
      <input [name]="field.name" [placeholder]="field.name" type="text">
    </div>
  `
})
export class SearchFormComponent {
  @ContentChildren(SearchFieldComponent) fields: QueryList < SearchFieldComponent > ;
}