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

Question

[Dmitry Shnyrev]

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

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

Как-то так.

PS. Раньше я реализовывал похожее, но все же кнопки и обработчики строились в самом компоненте по метаописанию. но это совсем костыльное решение.

Comments

[Dmitry Shnyrev]

Видел в интернете упоминания про ngForTemplate но так и не понял из примеров как его правильно использовать в подобной ситуации и вообще подойдет ли он.

[Владимир]

<div [innerHTML]="variable or htmlString">
</div>

Это ?

[Dmitry Shnyrev]

htmlString это может быть часть шаблона из parent? с рабочими биндингами? Погуглю в этом направлении. Отпишусь.

Answer 1

[Dmitry Shnyrev]

Все оказалось КРАЙНЕ ПРОСТО!!!
Но, блин, пока к этому пришел чуть мозг не вывихнул. В интернете примеров вообще нет, хотя странно потому что вроде 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>
...