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

Fork Me On Github

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

美化版

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

html
     

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

利用 ng-template 标签

html
                       

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

具体:

  1. ng-template 的数据传递,通过 *ngTemplateOutletcontext: 传递对象, 其中 $implicit 没默认名称
  2. ng-template 的数据获取,通过 let- 获取,例如: let-file 的意思就是:在 templateconst file = $implicit, 相当于完整写法 let-file="$implicit"
点击查看全文
标签: angular
0 204 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式
ng-deep 使用