Создание динамического повторителя с включением ng-контента с Angular2
Я пытаюсь добиться универсального компонента, который связан с массивом произвольных объектов, который позволяет динамически добавлять и удалять строки, когда представление каждой строки также произвольно определяется с компонентами основным компонентом, который его использует.
Обратите внимание, чтоMasterComponent это произвольный компонент, который будет реализован для разных страниц и должен быть автономным и не определяться никакими метаданными или внешним источником.
То, что у меня есть, это следующие компоненты:
RepeaterComponent шаблон:
<input type="button" value="Add" (click)="addRow()">
<div class="repeater" *ngFor="let row of repeaterArray">
<div class="repeaterRow">
<input type="button" value="Remove" (click)="removeRow(row.rowId)">
<ng-content select="row"></ng-content>
</div>
</div>
МастерКомпонент шаблон:
<repeater [repeaterArray]="repeaterObj">
<row>
<field-textbox [data]="row.name" [label]="'Name'"></field-textbox>
<field-textbox [data]="row.description" [label]="'Description'"></field-textbox>
</row>
</repeater>
<field-textbox>
компонент - это пользовательский компонент, который я использую для инкапсуляции простых входных данных, которые содержат некоторые дополнительные данные, которые мне нужно использовать.
MasterComponent содержит объект, который для этого экземпляра выглядит следующим образом:
repeaterObj = [
{
"rowId": 1,
"name": "First brand",
"description": "First description"
},
{
"rowId": 2,
"name": "Second brand",
"description": "Second description"
},
{
"rowId": 3,
"name": "Third brand",
"description": "Third description"
}
];
У этого подхода есть две проблемы, для которых я не могу найти решение.
Селектор ng-content одинаков для всех строк, когда ngFor дублирует шаблон, в результате чего у меня остается только одинng-content
точка включения после рендеринга.Там нет ссылки настрока переменная из объявления ngFor в<field-textbox>
включенные директивы, поэтому я не могу правильно связать данные.Есть ли лучший подход для реализацииRepeaterComponent это дало бы мне наименьшее количество усилий для создания новыхMasterComponents разных произвольных структур и разных шаблонов?