angular6中使用树形插件

效果图如下：

1、在app.model.ts文件中引入ng-zorro框架插件，代码如下

import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';

2、在需要使用树形插件的组件中进行引入树形插件：

import { NzFormatEmitEvent,NzTreeNode,NzTreeComponent,NzTreeNodeOptions} from 'ng-zorro-antd';

3、html代码如下：

 <form #myForm = "ngForm" action="" (ngSubmit)="onSubmit(myForm.value)">
        <div class="auth-Tree">
          <span>授权：</span>
          <nz-tree #nzTreeComponent [nzData]="nodesData" nzCheckable nzMultiple  nzShowLine  nzShowIcon 
            [nzCheckedKeys]="defaultCheckedKeys"
            [nzExpandedKeys]="defaultExpandedKeys"
            [nzSelectedKeys]="defaultSelectedKeys"
            (nzClick)="nzEvent($event)"
            (nzExpandChange)="nzEvent($event)"
            (nzCheckBoxChange)="getCheckedNodeList($event)">
          </nz-tree>
        </div>
        <div class="setUserOperate">
          <button class="pressBtn btn-save" type="submit">保存</button>
          <button class="pressBtn btn-back" (click)="cancel()">取消</button>
        </div>
</form>

其中参数可以去官网地址查看，根据所获取的节点进行节点树的选择，代码如下：

var KeyData = [];
    var Node =[];
    Node = this.nzTreeComponent.getTreeNodes();
    var Nodelength = Node.length;
    for(var i=0;i<Nodelength;i++){
      if(Node[i].isChecked == true){
        KeyData.push(Node[i].key);
        var NodeChildlength = Node[i]._children.length;
        for(var j=0;j<NodeChildlength;j++){
          if(Node[i]._children[j].isChecked == true ){
            KeyData.push(Node[i]._children[j].key);
          }
        }
      }
    }

可以再权限选择的上方添加两个按钮，全选和全否，控制树形图的节点配置，代码如下：

// 全选
  checkAll(){
    var Node =[];
    Node = this.nzTreeComponent.getTreeNodes();
    var Nodelength = Node.length;
    for(var i=0;i<Nodelength;i++){
      Node[i].isChecked = true;
      var NodeChildlength = Node[i].children.length;
      for(var j=0;j<NodeChildlength;j++){
        Node[i].children[j].isChecked = true;
      }
    }
  }
  // 全否
  checkNull(){
    var Node =[];
    Node = this.nzTreeComponent.getTreeNodes();
    var Nodelength = Node.length;
    for(var i=0;i<Nodelength;i++){
      Node[i].isChecked = false;
      var NodeChildlength = Node[i].children.length;
      for(var j=0;j<NodeChildlength;j++){
        Node[i].children[j].isChecked = false;
      }
    }
  }