Angular树形控件的使用

1.html引入树形控件，双向绑定数据

<nz-tree  nzSize="default" [nzData]="nodesdataNew" nzCheckable nzMultiple
                  [nzCheckedKeys]="defaultCheckedKeys"  [nzExpandedKeys]="defaultExpandedKeys"
                  [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)"
                  (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">   
 </nz-tree>

注释：
 // [nzCheckable]	节点前添加 Checkbox 复选框
 // [nzMultiple]	支持点选多个节点（节点本身）
 // [nzExpandedKeys]	展开指定的树节点
 // [nzCheckedKeys]	指定选中复选框的树节点
 // [nzSelectedKeys]	指定选中的树节点
 // (nzClick)	点击树节点触发
 // (nzExpandChange)	点击展开树节点图标触发
 // (nzCheckBoxChange)	点击树节点 Checkbox 触发

2.ts里的逻辑

定义一个树结构

//树选择器
public nodesdata:any = [
  {
    title: '日志列表',
    key: '日志列表',
    // expanded: true,
    children: [
      {
        title: '代理端',
        key: '代理端',
        // expanded: true,
        isLeaf: false, //是否有子级，false有，true没有
        children:[ ]
      },
      {
        title: '对象存储',
        key: '对象存储',
        isLeaf: true,
      }
    ]
  },
];

在点选复选框的逻辑处理，层级展开不同，控件所返回的逻辑结构就有所差别，因此分别写了当勾选不同层级的内容时，所对应的勾选字段的变化，true为勾选，false为未勾选
isAllChecked 字段：勾选有子级的某一项
checked字段：勾选无子级的某一项
parentNode字段：父级勾选状态

nzEvent(value?: any): void {
    this.downloadLogParams.agent = [];
    this.downloadLogParams.backupd = false;

  //一级选择--全选
    if(value.nodes[0].level == 0 && value.nodes[0].isAllChecked == true){
      this.downloadLogParams.backupd = true;
      this.downloadLogParams.agent = [];
      if(this.treeList.children[0].children.length != 0){
        for(var i=0;i<this.treeList.children[0].children.length;i++){
          this.downloadLogParams.agent.push({host_id:this.treeList.children[0].children[i].hostId});
        }
      } 
    }

    //二级选择--代理端全选以及对象存储选中
    if(value.nodes[0].level == 1){
      this.downloadLogParams.agent = [];
       //代理端全选
     if(value.nodes[0].parentNode.children[0].isAllChecked == true){
      for(var i=0;i<this.treeList.children[0].children.length;i++){
        this.downloadLogParams.agent.push({host_id:this.treeList.children[0].children[i].hostId});
      }
    }
      //对象存储选中
      if(value.nodes[0].parentNode.children[1].isAllChecked == true){
        this.downloadLogParams.backupd = true;
      }else{
        this.downloadLogParams.backupd = false;
    } 
  }

    //三级选择--代理端的内容
    if(value.nodes[0].level == 2){
      this.downloadLogParams.agent = [];
     for(var i=0;i<value.nodes[0].parentNode.origin.children.length;i++){
      if(value.nodes[0].parentNode.origin.children[i].checked == true){
        this.downloadLogParams.agent.push({host_id:this.treeList.children[0].children[i].hostId});
      }
    }
    }
}