Question

您可以在此处查看完整的概念证明：https://plnkr.co/edit/slshjP?p=preview

我想创建一个简单的树组件，允许用户为每个节点指定模板，例如。

<app-tree-editor [nodes]="fields">
  <ng-template treeTemplate let-node>{{node}}</ng-template>
</app-tree-editor>

我定义了一个指令来获取模板：

@Directive({
  selector: '[treeTemplate]',
})
export class TreeEditorTemplate {
  constructor(public template: TemplateRef<{}>) {

  } 
}

然后在我的树里面我得到了它的参考。

@Component({
  selector: 'app-tree-editor',
  template: `
    <app-tree-node [node]="root" [templateRef]="nodeTemplateRef">
    </app-tree-node>
  `,
})
export class TreeEditorComponent {
  @Input() nodes: any;

  @ContentChild(TreeEditorTemplate) nodeTemplate: TreeEditorTemplate;
  nodeTemplateRef: TemplateRef<{}>;

  root: any;

  ngOnInit() {
    this.root = {children: this.nodes};
  }

  ngAfterContentInit(): void {
    this.nodeTemplateRef = this.nodeTemplate.template;
  }
}

问题是，我得到的模板是注释节点：/

知道我做错了吗？

代码与repro案例：您可以在此处查看完整的概念证明：https://plnkr.co/edit/slshjP?p=preview

Answer 1

您忘记将模板参考传递给您的孩子app-tree-node组件：

应用/树children.ts

@Component({ selector: 'app-tree-children', template: ` <div class='tree-indent'> <app-tree-node *ngFor="let child of nodes" [node]="child" [templateRef]="templateRef"></app-tree-node> ^^^^^^^^^^^^^^^^^^^^^^ add this </div> ` }) export class TreeChildrenComponent { nodes: any; templateRef: TemplateRef<any>; <== add this }

应用/树node.ts

let componentRef = viewContainerRef.createComponent(componentFactory); componentRef.instance.nodes = this.node.children || []; componentRef.instance.templateRef = this.templateRef; <== add this

<强> Plunker Example

Answer 2

在这种情况下，您可以使用模板变量，然后通过@Input装饰器将其传递给组件。

<app-tree-editor [template]="template" [nodes]="fields">
    <ng-template #template let-node>{{node}}</ng-template>
</app-tree-editor>

在您的组件中，您需要添加输入：

@Input() template: TemplateRef<any>

Angular2：带模板的递归组件

2 个答案: