Angular2 - yeni bir bileşen yapmadan özyinelemeli html? açısal In 1

Question

ben böyle bir şey yapmak başardı: Ben yinelemeli o Angular2 şablon var ile birlikte bir bileşeni çağırabilir gerçekleştirmek

<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> 

ama yinelemeli sadece HTML oluşturmak için bir yol var mı? Mantık, bir dizi alt bileşenle değil, ana bileşenle daha iyi uyuşacak gibi görünüyor. kesinlikle

Answer 1

Orada Açısal bir html tek çözüm:

<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> 

İşte gist bu.