angular 14 使用 ng-template 实现tree 结构显示
美化版
当然是使用两个自定义控件
<tree>
<tree-node></tree-node>
</tree>
12345
利用 ng-template 标签
<ul class="tree-box">
<ng-container *ngFor="let item of items">
<ng-container *ngTemplateOutlet="fileItemTpl;context: {$implicit: item}"></ng-container>
</ng-container>
</ul>
<ng-template #fileItemTpl let-file>
<ng-container *ngIf="file">
<ng-container *ngIf="file.type < 1">
<li class="tree-parent" [ngClass]="{open: file.open}"><div class="name" (click)="toggleOpen(file)">{{ file.name }}</div>
<ul *ngIf="file.children">
<ng-container *ngFor="let it of file.children">
<ng-container *ngTemplateOutlet="fileItemTpl;context: {$implicit: it}"></ng-container>
</ng-container>
</ul>
</li>
</ng-container>
<ng-container *ngIf="file.type > 0">
<li><div class="tree-name">{{ file.name }}</div></li>
</ng-container>
</ng-container>
</ng-template>1234567891011121314151617181920212223
了解 ng-template 使用，需要搭配 *ngTemplateOutlet 使用
具体：
ng-template的数据传递，通过*ngTemplateOutlet的context:传递对象， 其中$implicit没默认名称ng-template的数据获取，通过let-获取，例如：let-file的意思就是：在template中const file = $implicit, 相当于完整写法let-file="$implicit"
转载请保留原文链接： https://zodream.cn/blog/id/232.html