Я пытаюсь создать универсальный компонент, привязанный к массиву произвольных объектов, который позволяет динамически добавлять и удалять строки, когда представление каждой строки также произвольно определяется компонентами главным компонентом, который его использует.
Обратите внимание, что 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>
Шаблон MasterComponent:
<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
после рендеринга. - Нет ссылки на переменную
row
из объявленияngFor
во включенных директивах<field-textbox>
, поэтому я не могу правильно связать данные.
Есть ли лучший подход к реализации RepeaterComponent
, который дал бы мне наименьшее количество усилий для создания новых MasterComponents
различных произвольных структур и разных шаблонов?