diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json index 0b2e115734..cd9029142c 100644 --- a/npm/ng-packs/angular.json +++ b/npm/ng-packs/angular.json @@ -277,6 +277,11 @@ "inject": true, "bundleName": "ngx-datatable-material" }, + { + "input": "node_modules/ng-zorro-antd/tree/style/index.min.css", + "inject": false, + "bundleName": "ng-zorro-antd-tree" + }, "apps/dev-app/src/styles.scss" ], "scripts": [] diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts index 0dcd29113d..e7566c587d 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts @@ -2,10 +2,13 @@ import { Component, ContentChild, EventEmitter, + Inject, Input, + Optional, Output, TemplateRef, ViewEncapsulation, + OnInit } from '@angular/core'; import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from 'ng-zorro-antd/tree'; import { of } from 'rxjs'; @@ -13,6 +16,7 @@ import { TreeNodeTemplateDirective } from '../templates/tree-node-template.direc 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 }; @@ -23,16 +27,18 @@ export type DropEvent = NzFormatEmitEvent & { pos: number }; encapsulation: ViewEncapsulation.None, providers: [SubscriptionService], }) -export class TreeComponent { +export class TreeComponent implements OnInit { dropPosition: number; dropdowns = {} as { [key: string]: NgbDropdown }; - constructor(private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService) { - const loaded$ = this.lazyLoadService.load( - LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), - ); - subscriptionService.addOne(loaded$); - } + + constructor( + private lazyLoadService: LazyLoadService, + subscriptionService: SubscriptionService, + @Optional() + @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN) + private disableTreeStyleLoading: boolean | undefined, + ) { } @ContentChild('menu') menu: TemplateRef; @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective; @@ -57,6 +63,20 @@ export class TreeComponent { return of(false); }; + ngOnInit() { + this.loadStyle() + } + + private loadStyle() { + if (disableTreeStyleLoading) { + return; + } + const loaded$ = this.lazyLoadService.load( + LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), + ); + subscriptionService.addOne(loaded$); + } + onSelectedNodeChange(node) { this.selectedNode = node.origin.entity; if (this.changeCheckboxWithNode) { diff --git a/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts new file mode 100644 index 0000000000..a96f7cb235 --- /dev/null +++ b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts @@ -0,0 +1,5 @@ +import { InjectionToken } from '@angular/core'; + +export const DISABLE_TREE_STYLE_LOADING_TOKEN = new InjectionToken( + 'DISABLE_TREE_STYLE_LOADING_TOKEN', +); diff --git a/npm/ng-packs/packages/components/tree/src/public-api.ts b/npm/ng-packs/packages/components/tree/src/public-api.ts index 1f3dd48e00..9b5caf5976 100644 --- a/npm/ng-packs/packages/components/tree/src/public-api.ts +++ b/npm/ng-packs/packages/components/tree/src/public-api.ts @@ -3,3 +3,4 @@ export * from './lib/components/tree.component'; export * from './lib/utils/nz-tree-adapter'; export * from './lib/templates/tree-node-template.directive'; export * from './lib/templates/expanded-icon-template.directive'; +export * from './lib/disable-tree-style-loading.token';