Angular 2 - включить в дочерний компонент

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

что-то вроде этого (в котором будет отображаться "Item:", за которым следует имя, выделенное жирным шрифтом):

<tree-view 
    [children]="folders" 
    childrenProperty="children">
    <template>Item:<b>{{item.name}}</b></template>
</tree-view>

Я могу получить TemplateRef, используя @ContentChild в классе компонента TreeView, и получить к нему доступ из компонента TreeViewItem, но я не нашел, как вставить его в объектную часть элемента.

Вы можете найти Plunker в моем компоненте древовидного представления здесь: http://plnkr.co/edit/IMqKV4TrwHoiWfJKHHQn?p=preview

Есть ли способ добиться этого с помощью Angular 2?


angular components transclusion
person Vincent    schedule 16.02.2016    source источник
comment
Почему бы вам просто не использовать тег <ng-content>?   -  person Günter Zöchbauer    schedule 17.02.2016
comment
<ng-content> может работать с ContentChild компонента, но не с ContentChild родительского компонента. Итак, я могу использовать <ng-content> в компоненте древовидного представления, но не в компоненте древовидного представления-элемента. Возможно, я могу использовать его, используя только один компонент, но я вижу другие случаи, когда использование только одного компонента невозможно.   -  person Vincent    schedule 17.02.2016

Ответы (1)


arrow_upward
2
arrow_downward

После долгих поисков я не нашел способа добиться именно того, чего хотел.

Обходной путь - загрузить (с помощью DynamicComponentLoader) заданный компонент (на входе) для каждого элемента дерева.

<tree-view 
    [children]="folders" 
    childrenProperty="children"
    [itemComponentClass]="itemComponent">
</tree-view>

Где itemComponent - это ссылка на класс компонента (у которого есть шаблон).

Не лучший способ, но он работает: http://plnkr.co/edit/96IWGkw3owtUWfuG299V?p=preview

person Vincent    schedule 25.02.2016