Fork Me On Github

angular 14 使用 ng-template 实现tree 结构显示

美化版

当然是使用两个自定义控件


<tree>
    <tree-node></tree-node>
</tree>

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

了解 ng-template 使用,需要搭配 *ngTemplateOutlet 使用

具体:

  1. ng-template 的数据传递,通过 *ngTemplateOutletcontext: 传递对象, 其中 $implicit 没默认名称
  2. ng-template 的数据获取,通过 let- 获取,例如: let-file 的意思就是:在 templateconst file = $implicit, 相当于完整写法 let-file="$implicit"
点击查看全文
标签: angular
0 21 0
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式
ng-deep 使用
angular 12 动态生成组件
angular 12 动画执行完成事件