From 720865b967937766c3a67a5157d10851fb66184a Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 12 Dec 2022 17:45:44 +0300 Subject: [PATCH 1/3] disable tree style loading with token --- npm/ng-packs/angular.json | 5 +++++ .../tree/src/lib/components/tree.component.ts | 15 ++++++++++++++- .../src/lib/disable-tree-style-loading.token.ts | 5 +++++ .../packages/components/tree/src/public-api.ts | 1 + 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts 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..16d4b2621e 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,7 +2,9 @@ import { Component, ContentChild, EventEmitter, + Inject, Input, + Optional, Output, TemplateRef, ViewEncapsulation, @@ -13,6 +15,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_LADING_TOKEN } from '../disable-tree-style-loading.token'; export type DropEvent = NzFormatEmitEvent & { pos: number }; @@ -27,7 +30,17 @@ export class TreeComponent { dropPosition: number; dropdowns = {} as { [key: string]: NgbDropdown }; - constructor(private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService) { + + constructor( + private lazyLoadService: LazyLoadService, + subscriptionService: SubscriptionService, + @Optional() + @Inject(DISABLE_TREE_STYLE_LADING_TOKEN) + disableTreeStyleLoading: boolean | undefined, + ) { + if (disableTreeStyleLoading) { + return; + } const loaded$ = this.lazyLoadService.load( LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), ); 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..a0c57921fe --- /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_LADING_TOKEN = new InjectionToken( + 'DISABLE_TREE_STYLE__LADING_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'; From 539e929cc0720e0cb996567ce765424f421b0db1 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 13 Dec 2022 09:16:01 +0300 Subject: [PATCH 2/3] Fix typo --- .../components/tree/src/lib/components/tree.component.ts | 4 ++-- .../tree/src/lib/disable-tree-style-loading.token.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 16d4b2621e..8edcf1db4f 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 @@ -15,7 +15,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_LADING_TOKEN } from '../disable-tree-style-loading.token'; +import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token'; export type DropEvent = NzFormatEmitEvent & { pos: number }; @@ -35,7 +35,7 @@ export class TreeComponent { private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService, @Optional() - @Inject(DISABLE_TREE_STYLE_LADING_TOKEN) + @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN) disableTreeStyleLoading: boolean | undefined, ) { if (disableTreeStyleLoading) { 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 index a0c57921fe..a96f7cb235 100644 --- 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 @@ -1,5 +1,5 @@ import { InjectionToken } from '@angular/core'; -export const DISABLE_TREE_STYLE_LADING_TOKEN = new InjectionToken( - 'DISABLE_TREE_STYLE__LADING_TOKEN', +export const DISABLE_TREE_STYLE_LOADING_TOKEN = new InjectionToken( + 'DISABLE_TREE_STYLE_LOADING_TOKEN', ); From 7d6cf7940cbfd4a50998ec317aff8e92153ac6a8 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 13 Dec 2022 10:19:09 +0300 Subject: [PATCH 3/3] move loadStyle to a method --- .../tree/src/lib/components/tree.component.ts | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) 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 8edcf1db4f..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 @@ -8,6 +8,7 @@ import { Output, TemplateRef, ViewEncapsulation, + OnInit } from '@angular/core'; import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from 'ng-zorro-antd/tree'; import { of } from 'rxjs'; @@ -26,7 +27,7 @@ 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 }; @@ -36,16 +37,8 @@ export class TreeComponent { subscriptionService: SubscriptionService, @Optional() @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN) - disableTreeStyleLoading: boolean | undefined, - ) { - if (disableTreeStyleLoading) { - return; - } - const loaded$ = this.lazyLoadService.load( - LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), - ); - subscriptionService.addOne(loaded$); - } + private disableTreeStyleLoading: boolean | undefined, + ) { } @ContentChild('menu') menu: TemplateRef; @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective; @@ -70,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) {