Angular 2 - 在子组件中嵌入答案

【问题标题】：Angular 2 - transclude in child componentAngular 2 - 在子组件中嵌入
【发布时间】：2016-05-28 11:37:18
【问题描述】：

我有一个树视图组件（它使用树视图项目组件），我想让用户定义项目的模板。

类似这样的东西（将显示“项目：”后跟粗体名称）：

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

我可以在TreeView 组件类中使用@ContentChild 检索TemplateRef，并从TreeViewItem 组件中访问它，但我还没有找到如何将它注入到项目的dom 中。

您可以在这里找到我的树视图组件上的 Plunker：http://plnkr.co/edit/IMqKV4TrwHoiWfJKHHQn?p=preview

有没有办法使用 Angular 2 来实现这一点？

【问题讨论】：

你为什么不直接使用<ng-content>标签？
<ng-content> 可以使用组件的 ContentChild，而不是父组件的 ContentChild。所以，我可以在树视图组件中使用<ng-content>，但不能在树视图项目组件中使用。我也许可以只使用一个组件来使用它，但我看到其他情况下只使用一个组件是不可能的。

【解决方案1】：

经过大量挖掘，我发现无法完全实现我想要的。

一种解决方法是为树的每个项目加载（使用 DynamicComponentLoader）一个给定的组件（在输入中）。

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

其中itemComponent 是对组件类（具有模板）的引用。

【讨论】：