2016-02-16 1 views
1

У меня есть компонент дерева-вида (который использует компонент дерева-вида), и я хочу, чтобы пользователь мог определить шаблон элементов.Angular 2 - transclude in child component

что-то вроде этого (который будет отображать «Пункт:» а затем имя выделены жирным шрифтом):

<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

Есть ли способ для достижения этой цели, используя угловые 2?

+0

Почему вы не просто использовать '' тег? –

+1

'' может работать с ContentChild компонента, а не с ContentChild родительского компонента. Таким образом, я могу использовать '' в компоненте tree-view, но не в компоненте tree-view-item. Я могу использовать его, используя только один компонент, но я вижу другие случаи, когда использование только одного компонента будет невозможно. – Vincent

ответ

1

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

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

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

Где itemComponent является ссылкой на класс компонента (который есть шаблон).

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