2016-12-12 6 views
5

कोणीय 1 में मैं की तरह कुछ करने के लिए कर रहा था: मुझे पता है मैं रिकर्सिवली साथ यह Angular2 में टेम्पलेट के साथ एक घटक कॉल कर सकते हैंकोणीय 2 - एक नया घटक बनाये बिना रिकर्सिव एचटीएमएल?

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

, लेकिन वहाँ एक रास्ता रिकर्सिवली केवल HTML के निर्माण के लिए है? तर्क ऐसा लगता है कि यह बाल घटकों की श्रृंखला के बजाय मूल घटक के साथ बेहतर फिट होगा।

+1

'ngTemplateOutlet' के लिए खोजें –

उत्तर

15
वहाँ निश्चित रूप से

एक 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 है।

संबंधित मुद्दे