rd-outer-component 0.0.66 → 0.0.68

package/fesm2020/rd-outer-component.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, Input, Output, NgModule, ViewChild, createComponent, Injectable, Pipe } from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output, NgModule, ViewChild, createComponent, Injectable, Optional, SkipSelf, Pipe } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import * as i1 from '@angular/common';
@@ -34,7 +34,6 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 import * as i1$1 from 'ng-zorro-antd/notification';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import * as i2$3 from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
 import { Subject, isObservable, of } from 'rxjs';
 import { debounceTime, filter, switchMap } from 'rxjs/operators';
 
@@ -1786,6 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+// notification.component.ts
 const borderColorMap = {
     success: '#bbf7e0',
     warn: '#fef0c3',
@@ -1795,14 +1795,16 @@ class RdNotificationComponent {
     constructor(notificationService, sanitizer) {
         this.notificationService = notificationService;
         this.sanitizer = sanitizer;
+        this.notifications = new Map();
     }
     showNotification(data) {
-        this.notification = this.notificationService.template(this.notificationTpl, {
+        const notificationId = this.generateId();
+        const notification = this.notificationService.template(this.notificationTpl, {
             nzData: data,
             nzDuration: data.duration || 8 * 1000,
             nzStyle: {
                 borderRadius: '4px',
-                border: `1px solid  ${borderColorMap[data?.type]}`,
+                border: `1px solid  ${borderColorMap[data?.type] || '#e5e7eb'}`,
                 boxShadow: '0px 8px 16px 0px rgba(31, 41, 55, 0.08)',
                 display: 'flex',
                 padding: '0',
@@ -1811,20 +1813,34 @@ class RdNotificationComponent {
             },
             nzClass: 'custom-wallet-notification',
             nzCloseIcon: this.closeTpl,
+            nzKey: notificationId, // 添加唯一 key
         });
+        this.notifications.set(notificationId, notification);
+        // 自动清理
+        setTimeout(() => {
+            this.notifications.delete(notificationId);
+        }, data.duration || 8000);
     }
     getDesc(desc) {
         return this.sanitizer.bypassSecurityTrustHtml(desc);
     }
     onClick(data) {
-        if (this.notification?.messageId) {
-            this.notificationService.remove(this.notification?.messageId);
-        }
         if (data.onLinkClick) {
-            // 明确检查存在性
             data.onLinkClick();
         }
     }
+    generateId() {
+        return `rd-notification-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+    }
+    ngOnDestroy() {
+        // 清理所有通知
+        this.notifications.forEach((notification, id) => {
+            this.notificationService.remove(id);
+        });
+        this.notifications.clear();
+    }
 }
 RdNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationComponent, deps: [{ token: i1$1.NzNotificationService }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
 RdNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RdNotificationComponent, selector: "app-rd-notification", viewQueries: [{ propertyName: "notificationTpl", first: true, predicate: ["notificationTpl"], descendants: true, static: true }, { propertyName: "closeTpl", first: true, predicate: ["closeTpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #notificationTpl let-data=\"data\">\n  <div class=\"rd-custom-notification\"></div>\n  <div\n    class=\"rd-custom-notification-icon\"\n    [class]=\"\n      data.type === 'warn'\n        ? 'rd-custom-warn-background'\n        : data.type === 'error'\n        ? 'rd-custom-error-background'\n        : ''\n    \"\n  >\n    <img\n      [hidden]=\"data.type !== 'success'\"\n      src=\"assets/img/icon/success-tip.svg\"\n    />\n    <img [hidden]=\"data.type !== 'warn'\" src=\"assets/img/icon/warm-tip.svg\" />\n    <img [hidden]=\"data.type !== 'error'\" src=\"assets/img/icon/error-tip.svg\" />\n  </div>\n  <div class=\"rd-custom-notification-container\">\n    <div class=\"rd-custom-notification-title\">{{ data.title }}</div>\n    <div\n      class=\"rd-custom-notification-desc\"\n      [innerHTML]=\"getDesc(data.desc)\"\n    ></div>\n    <div\n      *ngIf=\"data.actionDesc\"\n      class=\"rd-custom-notification-link\"\n      (click)=\"onClick(data)\"\n    >\n      {{ data.actionDesc }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #closeTpl>\n  <div class=\"rd-custom-notification-close\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M3.40039 3.3999L8.00039 7.9999M12.6004 12.5999L8.00039 7.9999M8.00039 7.9999L12.6004 3.3999L3.40039 12.5999\"\n        stroke=\"#030712\"\n        stroke-width=\"1.36\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </div>\n</ng-template>\n", styles: [".rd-custom-notification-container{padding:12px 40px 12px 12px}.rd-custom-notification-container .rd-custom-notification-title{font-size:12px;font-weight:600}.rd-custom-notification-container .rd-custom-notification-desc{font-size:12px;font-weight:500;margin-top:4px}.rd-custom-notification-container .rd-custom-notification-link{color:#367af6;font-size:13px;font-style:normal;font-weight:600;line-height:16px;cursor:pointer;margin-top:12px;padding:0 2px}.rd-custom-warn-background{background-color:#fef0c3!important}.rd-custom-error-background{background-color:#fce8eb!important}.rd-custom-notification-icon{display:flex;width:40px;padding:16px 12px;justify-content:center;align-items:center;flex-shrink:0;align-self:stretch;background-color:#dcfcf0}.rd-custom-notification-icon svg{flex-shrink:0;width:20px;height:20px}.rd-custom-notification-close{padding:16px 12px}.rd-custom-notification-close svg{width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -1839,67 +1855,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['closeTpl', { static: true }]
             }] } });
 
-class RdNotificationModule {
-}
-RdNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RdNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, declarations: [RdNotificationComponent], imports: [CommonModule,
-        RouterModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NzNotificationModule], exports: [RdNotificationComponent] });
-RdNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, imports: [CommonModule,
-        RouterModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NzNotificationModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [RdNotificationComponent],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NzNotificationModule,
-                    ],
-                    exports: [RdNotificationComponent],
-                }]
-        }] });
-
+// notification.service.ts
 class RdNotificationService {
-    constructor(applicationRef, injector) {
-        this.applicationRef = applicationRef;
+    constructor(injector, environmentInjector // 添加 EnvironmentInjector
+    ) {
         this.injector = injector;
-        this.createNotificationComponent();
+        this.environmentInjector = environmentInjector;
+        this.isCreating = false;
+        // 防止重复实例化
+        if (RdNotificationService.instance) {
+            return RdNotificationService.instance;
+        }
+        RdNotificationService.instance = this;
+    }
+    ensureComponentCreated() {
+        return new Promise((resolve) => {
+            if (this.notificationComponentRef) {
+                resolve();
+                return;
+            }
+            if (this.isCreating) {
+                // 如果正在创建，等待创建完成
+                const checkInterval = setInterval(() => {
+                    if (this.notificationComponentRef && !this.isCreating) {
+                        clearInterval(checkInterval);
+                        resolve();
+                    }
+                }, 10);
+                return;
+            }
+            this.isCreating = true;
+            try {
+                // 使用 setTimeout 避免在 Angular 生命周期内创建组件
+                setTimeout(() => {
+                    // Angular 15+ 的正确用法
+                    this.notificationComponentRef = createComponent(RdNotificationComponent, {
+                        environmentInjector: this.environmentInjector,
+                        elementInjector: this.injector,
+                    });
+                    const hostView = this.notificationComponentRef
+                        .hostView;
+                    const rootNode = hostView.rootNodes[0];
+                    if (document.body) {
+                        document.body.appendChild(rootNode);
+                    }
+                    else {
+                        // 如果 document.body 还不存在，等待 DOM 准备就绪
+                        document.addEventListener('DOMContentLoaded', () => {
+                            document.body.appendChild(rootNode);
+                        });
+                    }
+                    this.notificationComponentRef.changeDetectorRef.detectChanges();
+                    this.isCreating = false;
+                    resolve();
+                });
+            }
+            catch (error) {
+                console.error('Failed to create notification component:', error);
+                this.isCreating = false;
+                resolve();
+            }
+        });
     }
-    createNotificationComponent() {
-        // 创建组件
-        this.notificationComponent = createComponent(RdNotificationComponent, {
-            environmentInjector: this.applicationRef.injector,
-            elementInjector: this.injector,
+    async show(data) {
+        await this.ensureComponentCreated();
+        if (this.notificationComponentRef?.instance) {
+            // 使用 setTimeout 确保在下一个 Angular 周期执行
+            setTimeout(() => {
+                this.notificationComponentRef.instance.showNotification(data);
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.notificationComponentRef) {
+            this.notificationComponentRef.destroy();
+            this.notificationComponentRef = undefined;
+        }
+        RdNotificationService.instance = null;
+    }
+    // 静态方法用于快速访问
+    static show(data) {
+        setTimeout(() => {
+            const instance = this.getInstance();
+            if (instance) {
+                instance.show(data);
+            }
         });
-        // 添加到 DOM
-        const domElem = this.notificationComponent.hostView.rootNodes[0];
-        document.body.appendChild(domElem);
-        // 添加到 ApplicationRef
-        this.applicationRef.attachView(this.notificationComponent.hostView);
-    }
-    /**
-     * 显示通知
-     */
-    show(data) {
-        this.notificationComponent?.instance.showNotification(data);
+    }
+    static getInstance() {
+        return this.instance;
     }
 }
-RdNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RdNotificationService.instance = null;
+RdNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationService, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
 RdNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.EnvironmentInjector }]; } });
+
+// notification.module.ts
+class RdNotificationModule {
+    constructor(parentModule) {
+        if (parentModule) {
+            throw new Error('RdNotificationModule is already loaded. Import it in the AppModule only');
+        }
+    }
+    // 可选：提供配置方法
+    static forRoot() {
+        return {
+            ngModule: RdNotificationModule,
+            providers: [RdNotificationService],
+        };
+    }
+}
+RdNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, deps: [{ token: RdNotificationModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
+RdNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, declarations: [RdNotificationComponent], imports: [CommonModule, NzNotificationModule], exports: [RdNotificationComponent] });
+RdNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, imports: [CommonModule, NzNotificationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, NzNotificationModule],
+                    declarations: [RdNotificationComponent],
+                    exports: [RdNotificationComponent],
+                    providers: [
+                    // Service 已经在 @Injectable 中提供了，这里不需要重复提供
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: RdNotificationModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; } });
 
 class SearchListBaseComponent {
     constructor(searchStorageKey = '', isOutDatePicker = false) {