Question

我有一个处理表单输入的组件。此组件负责表单的验证和模板，然后在有效时将表单数据传递给它的父组件。我正在我的应用程序中的许多其他模块共享此组件，它们具有相同的责任。我现在已经到了一个地步，表单的输入会稍微变化。所以我想也许我可以在这种情况下使用指令。这就是我的想法。

现在组件就是这样

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

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

了

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

或者也许没有好的方式呢？

Answer 1

Directives are meant to attach behavior to elements in the DOM;因此，我认为这不适合这项工作。但是，根据您的目标，使用子组件可能是一种解决方案。此外，使用子组件是一种更像组件的方式，可以使事情更易读，更容易理解。

<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>

通过这种方式，您可以使用@ContentChildren()作为装饰器属性来提取包含所有SearchField的{{3}}，并对每个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 > ; }进行迭代以呈现您的输入。

<div class="img-container1 image-container" image-var="image1.jpg">
      <%= image_tag('image1.jpg') %>
      <div class="wk-after">
        <div class="centered-wk">
          <span class="fa fa-check-circle check-circle"></span>
        </div>
        <div class="centered-wk wk-select">
          SELECTED
        </div>
      </div>
    </div>

QueryList<SearchField>

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

1 个答案: