1. 程式人生 > >nz-tree的右鍵選單的實現, 以及選中狀態的實現

nz-tree的右鍵選單的實現, 以及選中狀態的實現

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>`
  1. 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 { }
  1. 最終的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 }