在 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?这种逻辑似乎更适合父组件,而不是一系列子组件。
肯定有一个html
Angular 中唯一的解决方案:
<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 https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)