Merge pull request #15085 from abpframework/disable-tree-style-loading

disable tree style loading with token

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": []

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(
+  constructor(
-      LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'),
+    private lazyLoadService: LazyLoadService,
-    );
+    subscriptionService: SubscriptionService,
-    subscriptionService.addOne(loaded$);
+    @Optional()
-  }
+    @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN)
+    private disableTreeStyleLoading: boolean | undefined,
+  ) { }
 
   @ContentChild('menu') menu: TemplateRef<any>;
   @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) {

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<boolean>(
+  'DISABLE_TREE_STYLE_LOADING_TOKEN',
+);

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';