feat(theme:modalhelper): support signal of params (#1917)

cipchk · web-flow · commit 5168ba3de6a5 · 2025-06-27T15:27:15.000+08:00
diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts
@@ -1,6 +1,7 @@
 import { DragDrop, DragRef } from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
 import { Injectable, TemplateRef, Type, inject } from '@angular/core';
+import { SIGNAL, SignalNode } from '@angular/core/primitives/signals';
 import { Observable, Observer, delay, filter, take, tap } from 'rxjs';
 
 import { deepMerge } from '@delon/util/other';
@@ -136,7 +137,15 @@ export class ModalHelper {
       } as ModalOptions);
       // 保留 nzComponentParams 原有风格，但依然可以通过 @Inject(NZ_MODAL_DATA) 获取
       if (subject.componentInstance != null && useNzData !== true) {
-        Object.assign(subject.componentInstance, params);
+        Object.entries(params as object).forEach(([key, value]) => {
+          const t = subject.componentInstance as any;
+          const s = t[key]?.[SIGNAL] as SignalNode<any>;
+          if (s != null) {
+            s.value = value;
+          } else {
+            t[key] = value;
+          }
+        });
       }
       subject.afterOpen
         .pipe(
diff --git a/packages/theme/src/services/modal/modal.spec.ts b/packages/theme/src/services/modal/modal.spec.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
@@ -47,6 +47,14 @@ describe('theme: ModalHelper', () => {
       expect(document.querySelector<HTMLElement>('.noNzData')?.innerText.trim()).toBe('true');
       expect(document.querySelector<HTMLElement>('.nzData')?.innerText.trim()).toBe('a');
     }));
+    it('should be params allow signal', fakeAsync(() => {
+      modal.create(TestModalComponent, { input_value: 10 }).subscribe(() => {
+        expect(true).toBeTruthy();
+        flush();
+      });
+      fixture.detectChanges();
+      expect(document.querySelector<HTMLElement>('.input_value')?.innerText.trim()).toBe('10');
+    }));
     describe('#exact width true', () => {
       it('should be not trigger subscript when return a undefined value', fakeAsync(() => {
         modal.create(TestModalComponent, { ret: undefined }, { includeTabs: true, exact: true }).subscribe({
@@ -160,11 +168,13 @@ describe('theme: ModalHelper', () => {
   template: `
     <div id="modal{{ id }}" class="handle noNzData">{{ ret }}</div>
     <div class="nzData">{{ data.ret }}</div>
+    <div class="input_value">{{ input_value() }}</div>
   `
 })
 class TestModalComponent {
   id = '';
   ret = 'true';
+  input_value = input<string>('');
 
   private readonly modal = inject(NzModalRef);
   readonly data = inject<{ ret: string }>(NZ_MODAL_DATA, { optional: true });
diff --git a/src/app/shared/components/dialog/modal.component.ts b/src/app/shared/components/dialog/modal.component.ts
@@ -1,5 +1,5 @@
 import { JsonPipe } from '@angular/common';
-import { Component, Input, inject } from '@angular/core';
+import { Component, Input, inject, input, model } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -12,6 +12,8 @@ import { NzModalRef } from 'ng-zorro-antd/modal';
       <div class="modal-title">Custom component</div>
     </div>
     <p>参数：{{ record | json }}</p>
+    <p>input_value: {{ input_value() }}</p>
+    <p>model_value: {{ model_value() }}</p>
     <div class="modal-footer">
       <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="cancel()"> Cancel </button>
       <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="ok()"> OK </button>
@@ -23,6 +25,8 @@ export class DemoModalComponent {
   private readonly modal = inject(NzModalRef);
 
   @Input() record: NzSafeAny;
+  input_value = input<string>('');
+  model_value = model<string>('');
 
   ok(): void {
     this.modal.destroy(`new time: ${+new Date()}`);
