@reskin/core 0.0.17 → 0.0.19

package/fesm2015/reskin-core-services.js

@@ -4,9 +4,9 @@ import { InjectionToken, Injectable, Inject, APP_INITIALIZER } from '@angular/co
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
-import { tap, map, filter } from 'rxjs/operators';
+import { tap, map, filter, catchError, shareReplay } from 'rxjs/operators';
 import { Store, deepClone } from '@reskin/core/utils';
-import { Subject } from 'rxjs';
+import { Subject, of, forkJoin, Observable } from 'rxjs';
 import { AnnexCatalogTypeEnum } from '@reskin/core/entity/annexCatalog';
 
 /**
@@ -1132,9 +1132,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
+/**
+ * 样式加载服务
+ * 提供动态加载和卸载CSS样式文件的功能，支持引用计数和缓存机制
+ *
+ * @description
+ * 该服务允许在运行时动态加载CSS文件，并通过引用计数机制管理样式文件的生命周期。
+ * 当多个组件需要同一个样式文件时，只会加载一次，但会增加引用计数。
+ * 当所有组件都卸载样式后，才会真正从DOM中移除该样式文件。
+ *
+ * 该服务使用预加载策略优化性能，首先使用`rel="preload"`加载样式文件，
+ * 加载完成后再将其设置为`rel="stylesheet"`以应用样式，避免页面闪烁问题。
+ *
+ * 服务特性:
+ * 1. 引用计数管理 - 避免重复加载和过早卸载
+ * 2. 缓存机制 - 使用shareReplay确保多次订阅复用同一结果
+ * 3. 容错处理 - 单个文件加载失败不影响其他文件
+ * 4. 内存优化 - 及时清理不再使用的样式文件
+ */
+class RkStyleLoaderService {
+    /**
+     * 构造函数
+     * @param rendererFactory Angular渲染器工厂，用于创建Renderer2实例
+     */
+    constructor(rendererFactory) {
+        /** 存储已加载样式的状态映射表，key为样式URL，value为样式状态 */
+        this.styleStates = new Map();
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * 加载一个或多个 CSS 文件，并返回每个文件的加载结果。
+     * 此方法具有容错性，即使部分文件失败，也会返回所有结果。
+     *
+     * @param hrefs CSS 文件 URL列表
+     * @returns Observable<ILoadResult[]> 每个CSS文件的加载结果数组
+     *
+     * @example
+     * ```typescript
+     * // 加载单个样式文件
+     * styleLoaderService.load('/assets/styles/theme.css')
+     *   .subscribe(results => {
+     *     if (results[0].success) {
+     *       console.log('样式加载成功');
+     *     } else {
+     *       console.error('样式加载失败:', results[0].error);
+     *     }
+     *   });
+     *
+     * // 加载多个样式文件
+     * styleLoaderService.load('/assets/styles/theme.css', '/assets/styles/components.css')
+     *   .subscribe(results => {
+     *     results.forEach(result => {
+     *       if (result.success) {
+     *         console.log(`样式 ${result.href} 加载成功`);
+     *       } else {
+     *         console.error(`样式 ${result.href} 加载失败:`, result.error);
+     *       }
+     *     });
+     *   });
+     * ```
+     *
+     * @description
+     * 该方法使用forkJoin并行加载所有CSS文件，即使其中某些文件加载失败，
+     * 也会等待所有文件加载完成后再返回结果，确保调用方能获取完整的加载状态信息。
+     */
+    load(...hrefs) {
+        if (hrefs.length === 0) {
+            return of([]);
+        }
+        const loadObservables = hrefs.map((href) => this.loadSingle(href).pipe(map(() => ({ href, success: true })), 
+        // 容错机制 - 捕获单个加载流的错误，并将其转换为成功发出的值
+        catchError((error) => of({ href, success: false, error }))));
+        return forkJoin(loadObservables);
+    }
+    /**
+     * 卸载一个或多个 CSS 文件。
+     * 使用引用计数，只有当没有任何组件需要此样式时，才会真正从 DOM 中移除。
+     *
+     * @param hrefs 要卸载的 CSS 文件 URL列表
+     *
+     * @example
+     * ```typescript
+     * // 卸载单个样式文件
+     * styleLoaderService.unload('/assets/styles/theme.css');
+     *
+     * // 卸载多个样式文件
+     * styleLoaderService.unload('/assets/styles/theme.css', '/assets/styles/components.css');
+     * ```
+     *
+     * @description
+     * 该方法通过减少引用计数来管理样式文件的生命周期。当引用计数降到0时，
+     * 才会真正从DOM中移除对应的<link>元素，从而避免样式文件被提前移除导致页面样式异常。
+     */
+    unload(...hrefs) {
+        hrefs.forEach((href) => {
+            const state = this.styleStates.get(href);
+            if (state) {
+                state.refCount--;
+                // 当引用计数为0时，从DOM中移除样式文件
+                if (state.refCount === 0) {
+                    const linkElement = document.head.querySelector(`link[href="${href}"]`);
+                    if (linkElement) {
+                        this.renderer.removeChild(document.head, linkElement);
+                    }
+                    // 清理状态缓存
+                    this.styleStates.delete(href);
+                }
+            }
+        });
+    }
+    /**
+     * 加载单个CSS文件
+     * 使用预加载策略和引用计数机制优化性能
+     *
+     * @param href CSS文件URL
+     * @returns 返回加载CSS文件的Observable
+     *
+     * @description
+     * 该方法使用预加载技术优化样式加载过程:
+     * 1. 首先创建<link>元素并设置为预加载(rel="preload")
+     * 2. 监听加载完成事件
+     * 3. 加载完成后将元素设置为样式表(rel="stylesheet")
+     * 4. 使用shareReplay(1)确保多次订阅复用同一结果
+     * 5. 通过引用计数避免重复加载
+     *
+     * 这种方式可以避免样式加载过程中的页面闪烁问题，同时提高性能。
+     */
+    loadSingle(href) {
+        // 检查是否已存在该样式文件的加载状态
+        let state = this.styleStates.get(href);
+        if (state) {
+            // 增加引用计数
+            state.refCount++;
+            return state.observable;
+        }
+        // 创建新的加载Observable
+        const load$ = new Observable((observer) => {
+            // 创建link元素
+            const link = this.renderer.createElement('link');
+            // 设置预加载属性
+            this.renderer.setAttribute(link, 'rel', 'preload');
+            this.renderer.setAttribute(link, 'as', 'style');
+            this.renderer.setAttribute(link, 'href', href);
+            // 监听加载完成事件
+            link.onload = () => {
+                // 清除事件处理函数避免内存泄漏
+                link.onload = null;
+                // 将预加载改为样式表应用
+                this.renderer.setAttribute(link, 'rel', 'stylesheet');
+                // 通知观察者加载完成
+                observer.next(link);
+                observer.complete();
+            };
+            // 监听加载错误事件
+            link.onerror = (error) => {
+                observer.error(error);
+            };
+            // 将link元素添加到head中开始加载
+            this.renderer.appendChild(document.head, link);
+        }).pipe(
+        // 使用shareReplay确保多次订阅复用同一结果
+        shareReplay(1));
+        // 创建并存储新的状态
+        state = { observable: load$, refCount: 1 };
+        this.styleStates.set(href, state);
+        return state.observable;
+    }
+}
+RkStyleLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkStyleLoaderService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+RkStyleLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkStyleLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkStyleLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppConfig, CacheHttpTemplate, RK_ENVIRONMENT, RkAccountService, RkAnnexCatalogService, RkAuthService, RkCacheHttpService, RkDestroyService, RkDictionaryService, RkDownFileService, RkFieldSchemeService, RkFileService, RkMenuService, RkOrgService, RkPersonDatasetService, RkSchemeService, RkUnitDatasetService, providerAppConfig };
+export { AppConfig, CacheHttpTemplate, RK_ENVIRONMENT, RkAccountService, RkAnnexCatalogService, RkAuthService, RkCacheHttpService, RkDestroyService, RkDictionaryService, RkDownFileService, RkFieldSchemeService, RkFileService, RkMenuService, RkOrgService, RkPersonDatasetService, RkSchemeService, RkStyleLoaderService, RkUnitDatasetService, providerAppConfig };
 //# sourceMappingURL=reskin-core-services.js.map