将 "content-projection" 传递给递归 NGTemplateOutlet 组件？

Question

我正在尝试使用 NgTemplateOutlet 为节点树创建递归组件。

我卡在了我需要 html 的部分，该 html 已传递到顶层组件以显示在我的递归组件中..

我的递归组件基于 this article, and this StackBlitz example。

app.component.html

<wt-nested-list [nodes]="topNodeTree">
  <div *nestedListNode="let node">
    <h1>{{ node.nodeName }}</h1>
  </div>
</wt-nested-list>

嵌套-list.component.html

<div class="wt-nested-list">

<ng-container *ngFor="let node of nodes">
  <!-- node -->
  <div class="wt-nested-list__node">
    <ng-container *ngTemplateOutlet="nodeTemplate; context: {$implicit: node}"></ng-container>
    <!-- child nodes of node -->
    <ng-container *ngIf="node.children">
      <wt-nested-list>
        ???
      </wt-nested-list>
    </ng-container>
  </div>
</ng-container>

</div>

如何将 app.component.html 中的自定义 html ( <div *nestedListNode= ...etc ) 也放入递归部分 wt-嵌套-list.component.html ? （表示为???）

这是一个 www.stackblitz.com 示例，可能有助于解释我的问题 https://stackblitz.com/edit/angular-wt9f4x

Answer 1

我会通过定义可选的 @Input 属性来解决这个问题，我将传递给嵌套组件：

嵌套-list.component.ts

class NestedListComponent {

  @Input() template: TemplateRef<any>;

  @ContentChild( NestedListNodeDirective, { read: TemplateRef } ) nodeTemplate;

现在，在模板中我们需要确保至少存在以下模板之一：

嵌套-list.component.html

<ng-container *ngTemplateOutlet="nodeTemplate || template; context: ..."></ng-container>
...
<wt-nested-list [nodes]="node.children" [template]="nodeTemplate || template">
</wt-nested-list>

Stackblitz Example

将 "content-projection" 传递给递归 NGTemplateOutlet 组件？

Pass "content-projection" into recursive NGTemplateOutlet component?

recursion

angular2-template

angular