Angular2 - 没有制作新组件的递归html？答案

【问题标题】：Angular2 - recursive html without making a new component?Angular2 - 没有制作新组件的递归html？
【发布时间】：2016-12-12 21:02:24
【问题描述】：

在 angular 1 中，我能够执行以下操作：

<script type="text/ng-template" id="commentView.html">
    <div>
        <div style="float: left; position: absolute;" ng-style="comment.displayPercent">
    </div>
</script>

<script type="text/ng-template" id="commentReplies.html">
    <div>
        <div class="commentChildBoxStyle" ng-hide="comment.hideComment">
            <div style="min-width: 250px;">

                <div ng-repeat="comment in comment.replies" ng-include="'commentReplies.html'"></div>
            </div>

        </div>
    </div>
</script>

我意识到我可以在 Angular2 中递归调用组件及其模板，但是有没有办法仅递归构建 HTML？逻辑似乎更适合父组件而不是一系列子组件。

【问题讨论】：

搜索ngTemplateOutlet

标签： angular typescript angular2-template

【解决方案1】：

在 Angular 中肯定有一个 html 唯一的解决方案：

<h1>Angular 2 Recursive List</h1>
<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.title}}
      <ul *ngIf="item.children.length > 0">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

这是gist。

【讨论】：