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

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>

每个步骤组件都有 header 属性。

那样的话，为了改变标签的结构，我只需要在这里改变一次，如果标题和按钮进入每个组件的模板，那么我必须改变每个组件的模板，如果我愿意更改选项卡结构。

你会怎么做，有没有更好的方法来实现这个结构？

谢谢！

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 页面中，您可以将表单传递给您的每个模板。