Angular2 - 递归 html 而不创建新组件? [英] Angular2 - recursive html without making a new component?
本文介绍了Angular2 - 递归 html 而不创建新组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在角度 1 中,我可以执行以下操作:
<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.replies 中的评论" ng-include="'commentReplies.html'"></div>
我意识到我可以在 Angular2 中递归调用组件及其模板,但是有没有办法只递归构建 HTML?该逻辑似乎更适合父组件而不是一系列子组件.
解决方案
在 Angular 中肯定有一个 html
唯一的解决方案:
Angular 2 递归列表
<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></ng-模板><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
这是一个要点.
In angular 1 I was able to do something like:
<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>
I realize I can recursively call a component along with it's template in Angular2, but is there a way to recursively build HTML only? The logic seems like it would fit better with the parent component rather than with a series of child components.
解决方案
There certainly is a html
only solution in 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>
Here's a gist.
这篇关于Angular2 - 递归 html 而不创建新组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!