dmnBrest
@dmnBrest
Salesforce for money. Python, Go, Ruby for soul.

Как реализовать передать шаблон в виде параметра в компонент в Angular 2?

Не знаю как правильно это сформулировать понятиями из Ангуляр 2 но попробую описать то что хочу получить в итоге.

Есть компонент Ангуляр2 который строит таблицу из массива объектов который я передаю в качестве параметра. Последняя колонка будет содержать различные кнопки для выполения операции над каждым из объектов. Смысл в том чтобы строить эти кнопки (ячейки в последней колонке) динамически на основе шаблона переданного в качестве параметра. В общем что-то на подобии ng-content (ng-transclude в angular 1) только чтобы работало внутри ngFor и был доступ к контексту (текущему объекту из цикла). Обработчики должны быть в родителе, т.е. данный компонент который строит таблица вообще не должен знать что там вообще будут какие-то кнопки и обработчики - тупо строит таблицу в цикле, в последней колонке берет шаблон, строит его и передает контекст.

Как-то так.

PS. Раньше я реализовывал похожее, но все же кнопки и обработчики строились в самом компоненте по метаописанию. но это совсем костыльное решение.
  • Вопрос задан
  • 1445 просмотров
Решения вопроса 1
dmnBrest
@dmnBrest Автор вопроса
Salesforce for money. Python, Go, Ruby for soul.
Все оказалось КРАЙНЕ ПРОСТО!!!
Но, блин, пока к этому пришел чуть мозг не вывихнул. В интернете примеров вообще нет, хотя странно потому что вроде use case обычный.
Решение оказалось даже еще больше чем рабочее - получилось использовать несколько именованных шаблона в рамках одного компонента.

В общем в parent component делаем так.

<datatable [items]="accounts">
	<template #aa1 let-item="item">
		Custom template for: <b>{{item.Name}}</b>
			<button (click)="testTemplate(item)">From Template</button>
	</template>
	<template #aa2 let-item="item">
		Custom template for: <i>{{item.Name}}</i>
		<button (click)="testTemplate(item)">From Template</button>
	</template>
</datatable>


в child сomponent делаем так
@ContentChild('aa1') template1: TemplateRef<any>;
@ContentChild('aa2') template2: TemplateRef<any>;


а в шаблоне
...
<tr *ngFor="let item of items">
    <td>
         <template 
	       [ngTemplateOutlet]="template1" 
	       [ngOutletContext]="{item: item}">
         </template>
    </td>
    <td>
         <template 
	       [ngTemplateOutlet]="template2" 
	       [ngOutletContext]="{item: item}">
         </template>
    </td>
</tr>
...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы