nz-tree的右键菜单的实现， 以及选中状态的实现

版权声明：.net/web/医疗技术的木子纵横的个人分享 https://blog.csdn.net/muzizongheng/article/details/85246915

ant design of angular中的nz-tree在官方实例并没有给出和context menu的例子， 不过官方的context menu独立的例子倒是有：

https://ng.ant.design/components/dropdown/zh#components-dropdown-demo-context-menu

我们需要把nz-tree和context menu 结合。

1. nz-tree的每一个tree item的自定义模板的写法如下：
   

nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >

<ng-template #nzTreeTemplate let-node>

<span>

{{ node.title }}

</span>

</ng-template

</nz-tree>`

2. context menu 的自定义模板和创建如下：

//触发右键菜单的创建

<span (contextmenu)="contextMenu($event,template)">

{{ node.title }}

</span>

//右键菜单的item项

<ng-template #template>

<ul nz-menu nzInDropDown (nzClick)="close($event)">

<li nz-menu-item (click)="editUnit(node, $event)">修改</li>

<li nz-menu-item>增加</li>

<li nz-menu-item nzDisabled>删除</li>

</ul>

</ng-template>

//声明导入

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';

import { NzTreeNode, NzTreeComponent, NzDropdownContextComponent, NzDropdownService, NzMenuItemDirective } from 'ng-zorro-antd';

//构造函数里注入右键菜单的服务

private dropdown: NzDropdownContextComponent;

constructor( private nzDropdownService: NzDropdownService) { }

//创建右键菜单和关闭右键菜单的代码

contextMenu($event: MouseEvent, template: TemplateRef<void>): void {

this.dropdown = this.nzDropdownService.create($event, template);

}

close(e: NzMenuItemDirective): void {

console.log(e);

this.dropdown.close();

}

//右键菜单的菜单项的单击事件处理

editUnit(node: NzTreeNode, e: NzFormatEmitEvent): void {

}

3. 最终的nz-tree 模板和右键菜单结合后的html如下

<nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >

<ng-template #nzTreeTemplate let-node>

<span (contextmenu)="contextMenu($event,template)">

{{ node.title }}

</span>

</ng-template>

<ng-template #template>

<ul nz-menu nzInDropDown (nzClick)="close($event)">

<li nz-menu-item (click)="editUnit(node, $event)">修改</li>

<li nz-menu-item>增加</li>

<li nz-menu-item nzDisabled>删除</li>

</ul>

</ng-template>

</nz-tree>`

上面完成了nz-tree树控件添加右键菜单的功能示例。

接下来，我们为树节点添加单击时的选中效果。 简单来说， 就是在nz-tree的节点模板中为dom元素添加选中时的class， 然后在css中写上对应style即可。 

不过需要注意的是， 单击选中的状态的判断并不是用NzTreeNode自带的isSelected属性， 发现这个属性判断有问题。 最终解决是保存当前的单击树节点， 然后在模板中判断是否是当前选中项。

<ng-template #nzTreeTemplate let-node>

<span  [class.active]="selectedNode !== null && selectedNode === node" (contextmenu)=" contextMenu($event,template) :"

(click)="updateSelectedNode(node, $event)">

<span>

<i class="anticon anticon-folder-open" *ngIf="!node.isLeaf"></i>

<i class="anticon anticon-file" *ngIf="node.isLeaf"></i>{{ node.title }}

</span>

</span>

<ng-template #template>

<ul nz-menu nzInDropDown (nzClick)="close($event)">

<li nz-menu-item (click)="editUnit(node, $event)" >修改</li>

<li nz-menu-item>增加</li>

<li nz-menu-item nzDisabled>删除</li>

</ul>

</ng-template>

</ng-template>

selectedNode: NzTreeNode;

updateSelectedNode(node: NzTreeNode, e: NzFormatEmitEvent): void {

this.selectedNode = node;

}

.active {

background-color: cornflowerblue

}