Angular - Добавление компонентов динамически в разные родительские элементы - PullRequest
Новая
       22

Angular - Добавление компонентов динамически в разные родительские элементы

0 голосов
/ 16 декабря 2018

Я хочу создать многошаговую форму, где каждый шаг - это отдельная вкладка, и пользователь может переходить вперед / назад по форме.Каждая вкладка имеет заголовок, содержимое и кнопки навигации.

В моем компоненте формы у меня есть массив всех компонентов (каждый представляет собой шаг в форме), и я хочу просмотреть его в шаблоне формы,так что каждый шаг имеет одинаковую структуру, и если я хочу изменить эту структуру, я должен только изменить код в цикле, так как он одинаков для всех шагов.

Это массив в 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>

Каждый компонент шага имеет свойство заголовка.

Таким образом, чтобы изменить структуру вкладки, яизменить его здесь нужно только один раз, если заголовок и кнопки находятся внутри шаблона каждого компонента, тогда мне придется изменить шаблон каждого компонента, если я хочу изменить структуру вкладки.

Как бы вы это сделали?Есть ли лучший способ достичь этой структуры?

Спасибо!

1 Ответ

0 голосов
/ 16 декабря 2018

Вам необходим компонент-заполнитель, в котором размещается структура вкладки формы.Тогда, как вы сказали, у вас есть только 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, и вы передадите форму каждому из ваших шаблонов.

...