ng-template和ng-container及利用ngTemplateOutlet遍历树形结构数据

ng-container

ng-container 是angular 定义的一个特殊的语义化标签
可以把它理解为一个容器，可以直接包裹任何一个元素，但本身不会生成元素化标签，也不会影响页面布局和样式

ng-container 经常用来配合ngif和ngfor进行使用
<div [ngStyle]="{'background-color':'yellow'}">
  <ng-container *ngFor="let data of valueData">
    <div>{{data}}</div>
  </ng-container>
</div>

ng-template

ng-template 是angular结构性指令的一种，用于定义模板渲染加载html,
定义了一个默认不渲染的模板，需要其他结构性指令如ngif或tempate-ref将模块内容渲染到页面中

<ng-container *ngIf="status else NoStatus">
  status 为true
</ng-container>
<ng-template #NoStatus>
  status为false
</ng-template>

可以通过ng-container中的templateOutlet指令动态加载ng-template模板

<ng-template #login>
  login
</ng-template>
<ng-template #index>
  index
</ng-template>
<ng-container *ngTemplateOutlet="login"></ng-container>
<ng-container [ngTemplateOutlet]="index"></ng-container>

ngTemplateOutletContext

可以通过ngTemplateOutletContext属性传递数据给ngTemplateOutlet
使用模板输入变量let的形式，接收上下文属性值

<ng-template let-value="value" #testContext>
  {{value}}
</ng-template>
<!--不简写的写法-->
<ng-container [ngTemplateOutlet]="testContext" [ngTemplateOutletContext]="{value:testContextString}">
</ng-container>
testContextString='这是一段测试ngTemplateOutLetContext的内容'

ngTemplateOutletContext可以缩写
$implicit 是默认值,在let-value后面没有=时,value会引用它

<!--简写的写法-->
此时data用的时context 中传入的默认值
<ng-template let-data>
  {{data}}
</ng-template>
<ng-container *ngTemplateOutlet="testContext context:{$implicit:'默认引用值',value:testContextString}">
</ng-container>

遍历树形结构数据

利用ng-template和ng-container 以及ngTemplateOutlet 进行dom递归生成树结构

<ng-container *ngTemplateOutlet="nodeTreeDisplay context:{$implicit:tree,level:0}"></ng-container>

<ng-template #nodeTreeDisplay let-nodes let-level='level'>
  <ng-container *ngFor="let item of nodes;">
    <div [style]="{'margin-left':level * 10 + 'px'}">
      {{item.text}}
    </div>
    <!--寻找树的子节点-->
    <ng-container *ngIf="item.children">
      <ng-container *ngTemplateOutlet="nodeTreeDisplay context:{$implicit:item.children,level:level +1 }">
      </ng-container>
    </ng-container>
  </ng-container>
</ng-template>

树结构数据

type TreeNode ={
  text:string,
  children?:TreeNode[]
}

tree: TreeNode[] = [
    {
      text: '父节点1',
      children: [
        {
          text: '子节点a',
          children: [
            {
              text: '子节点b',
            },
            {
              text: '子节点c',
            },
          ],
        }
      ],
    },
    {
      text: '父节点2',
      children: [
        {
          text: '子节点d',
          children: [
            {
              text: '子节点e',
            },
          ],
        },
      ],
    },
    {
      text: '父节点3',
    },
  ];