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});
      }
    }
    }
}