Browse Source

fix: nz-tree selection problem

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

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

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

Loading…
Cancel
Save