Browse Source

fix: nz-tree selection problem

pull/22154/head
sumeyye 12 months ago
parent
commit
97ce70160e
  1. 14
      npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
  2. 27
      npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

14
npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html

@ -9,18 +9,18 @@
[nzExpandedKeys]="expandedKeys"
[nzExpandedIcon]="expandedIconTemplate?.template || defaultIconTemplate"
(nzExpandChange)="onExpandedKeysChange($event)"
(nzCheckBoxChange)="onCheckboxChange($event)"
(nzCheckboxChange)="onCheckboxChange($event)"
(nzOnDrop)="onDrop($event)"
[nzNoAnimation]="noAnimation"
(nzContextMenu)="dropdowns[$event.node?.key]?.toggle()"
></nz-tree>
/>
<ng-template #treeTemplate let-node>
<div
[class.selected]="isNodeSelected(node)"
[title]="node.title"
(click)="onSelectedNodeChange(node)"
>
<ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: node }"></ng-container>
<ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: node }" />
<ng-template #nodeTemplate let-node>
<div class="d-inline-flex align-items-center abp-ellipsis-inline">
@ -29,7 +29,7 @@
customNodeTemplate ? customNodeTemplate?.template : defaultNodeTemplate;
context: { $implicit: node }
"
></ng-container>
/>
</div>
@if (menu) {
@ -48,7 +48,7 @@
aria-hidden="true"
></i>
<div ngbDropdownMenu>
<ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
<ng-template *ngTemplateOutlet="menu; context: { $implicit: node }" />
</div>
</div>
}
@ -62,8 +62,8 @@
<ng-template #defaultIconTemplate let-node let-origin="origin">
<i aria-hidden="true">
<ng-container *ngTemplateOutlet="node.isExpanded ? minusIcon : plusIcon"></ng-container
></i>
<ng-container *ngTemplateOutlet="node.isExpanded ? minusIcon : plusIcon"
/></i>
</ng-template>
<ng-template #minusIcon>

27
npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@ -4,21 +4,20 @@ import {
Component,
ContentChild,
EventEmitter,
Inject,
inject,
Input,
OnInit,
Optional,
Output,
TemplateRef,
ViewEncapsulation,
} from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree';
import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core';
import { of } from 'rxjs';
import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token';
import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core';
import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token';
export type DropEvent = NzFormatEmitEvent & { pos: number };
@ -32,19 +31,15 @@ export type DropEvent = NzFormatEmitEvent & { pos: number };
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TreeComponent implements OnInit {
private lazyLoadService = inject(LazyLoadService);
private subscriptionService = inject(SubscriptionService);
private cdr = inject(ChangeDetectorRef);
private disableTreeStyleLoading = inject(DISABLE_TREE_STYLE_LOADING_TOKEN, { optional: true });
dropPosition: number;
dropdowns = {} as { [key: string]: NgbDropdown };
constructor(
private lazyLoadService: LazyLoadService,
private subscriptionService: SubscriptionService,
@Optional()
@Inject(DISABLE_TREE_STYLE_LOADING_TOKEN)
private disableTreeStyleLoading: boolean | undefined,
private cdr: ChangeDetectorRef,
) {}
@ContentChild('menu') menu: TemplateRef<any>;
@ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
@ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
@ -88,7 +83,7 @@ export class TreeComponent implements OnInit {
return node;
}
if (node.children) {
let res = this.findNode(target, node.children);
const res = this.findNode(target, node.children);
if (res) {
return res;
}
@ -138,7 +133,7 @@ export class TreeComponent implements OnInit {
}
setSelectedNode(node: any) {
let newSelectedNode = this.findNode(node, this.nodes);
const newSelectedNode = this.findNode(node, this.nodes);
this.selectedNode = { ...newSelectedNode };
this.cdr.markForCheck();
}

Loading…
Cancel
Save