Question

我想构建一个多步骤表单，其中每个步骤都是其自己的标签，用户可以在表单中前进/后退。每个选项卡都有标题，内容和导航按钮。

在我的表单组件中，我有一个所有组件的数组（每个组件代表表单中的一个步骤），我想在表单的模板中循环遍历它，以便每个步骤都具有相同的结构，并且如果我想更改这种结构我只应该在循环中更改代码，因为所有步骤都相同。

这是 form.component.ts 中的数组：

steps = [
    LanguageComponent,
    CodeComponent,
    HardwareComponent,
    SubmissionComponent
]

或者应该是

steps = [
    new LanguageComponent,
    new CodeComponent,
    new HardwareComponent,
    new SubmissionComponent
]

？

这是伪form.component.html：

<div id="tabs">
    <div class="tab" *ngFor="let step of steps" id="{{step.header}}">
        {{ step.header }}
        <app-step></app-step>
        {{ buttons }}
    </div>
</div>

每个步骤组件都具有标题属性。

这样，为了更改选项卡的结构，我只需要在这里更改一次，如果标题和按钮位于每个组件的模板内部，那么我将不得不更改每个组件的模板更改标签结构。

您将如何执行此操作，是否有更好的方法来实现此结构？

谢谢！

Answer 1

您需要一个占位符组件，用于容纳表单标签结构。然后就像您说的那样，您只有1个位置需要更改布局。

AppFormTabComponent.html

<ngb-tabset>
    <ngb-tab>
        <ngbTemplate>
           <language-component [form]="form"></language-component>
        </ngbTemplate>
    </ngb-tab>
    <ngb-tab>
        <ngbTemplate>
           <code-component [form]="form"></code-component>
        </ngbTemplate>
    </ngb-tab>
    ...
</ngb-tabset>

然后，您只需调用一次AppFormTabComponent即可使用它

form.component.html

<app-form-tab-component [form]="form"></app-form-tab-component>

您的表单将在app.component.ts页面中，并将该表单传递给每个模板。

Angular-在不同的父元素中动态添加组件

1 个答案: