fix(abc:cell): fix can't change detection of widget (#1787)

ng-alain · Mar 18, 2024 · e9753cb · e9753cb
1 parent 0fba461
commit e9753cb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/packages/abc/cell/cell-host.directive.ts b/packages/abc/cell/cell-host.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit, Type, ViewContainerRef, inject } from '@angular/core';
+import { Directive, Input, OnChanges, Type, ViewContainerRef, inject } from '@angular/core';
 
 import { warn } from '@delon/util/other';
 
@@ -9,13 +9,13 @@ import { CellTextResult } from './cell.types';
   selector: '[cell-widget-host]',
   standalone: true
 })
-export class CellHostDirective implements OnInit {
+export class CellHostDirective implements OnChanges {
   private readonly srv = inject(CellService);
-  private readonly viewContainerRef = inject(ViewContainerRef);
+  private readonly vcr = inject(ViewContainerRef);
 
   @Input() data!: CellTextResult;
 
-  ngOnInit(): void {
+  ngOnChanges(): void {
     const widget = this.data.options.widget!;
     const componentType = this.srv.getWidget(widget.key!)?.ref as Type<unknown>;
     if (componentType == null) {
@@ -25,8 +25,8 @@ export class CellHostDirective implements OnInit {
       return;
     }
 
-    this.viewContainerRef.clear();
-    const componentRef = this.viewContainerRef.createComponent(componentType);
+    this.vcr.clear();
+    const componentRef = this.vcr.createComponent(componentType);
     (componentRef.instance as { data: CellTextResult }).data = this.data;
   }
 }
diff --git a/packages/abc/cell/cell.spec.ts b/packages/abc/cell/cell.spec.ts
@@ -208,6 +208,7 @@ describe('abc: cell', () => {
             const srv = TestBed.inject(CellService);
             srv.registerWidget(TestWidget.KEY, TestWidget);
             page.update('1', { widget: { key: TestWidget.KEY, data: 'new data' } }).check('1-new data');
+            page.update('1', { widget: { key: TestWidget.KEY, data: 'new data2' } }).check('1-new data2');
           });
           it('when key is invalid', () => {
             spyOn(console, 'warn');

diff --git a/packages/abc/cell/demo/simple.md b/packages/abc/cell/demo/simple.md
@@ -143,10 +143,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       <div nz-col nzSpan="8"> Text Unit => <cell [value]="{ text: '100', unit: '元' }" /> </div>
       <div nz-col nzSpan="8">
         custom widget =>
-        <cell
-          value="https://randomuser.me/api/portraits/thumb/women/47.jpg"
-          [options]="{ widget: { key: 'test', data: 'new url' } }"
-        />
+        <cell [value]="imageValue" [options]="{ widget: { key: 'test', data: 'new url' } }" />
+        <a (click)="refreshImage()">Refresh Image</a>
       </div>
     </div>
   `,
@@ -165,6 +163,7 @@ export class DemoComponent implements OnInit {
   private readonly ds = inject(DomSanitizer);
   private readonly cdr = inject(ChangeDetectorRef);
   value: unknown = 'string';
+  imageValue = 'https://randomuser.me/api/portraits/thumb/women/47.jpg';
   checkbox = false;
   radio = true;
   disabled = false;
@@ -221,5 +220,10 @@ export class DemoComponent implements OnInit {
     this.safeHtml = this.ds.bypassSecurityTrustHtml(`alert('a');<script>alert('a')</script>`);
     this.cdr.detectChanges();
   }
+
+  refreshImage(): void {
+    this.imageValue = `https://randomuser.me/api/portraits/thumb/women/${Math.floor(Math.random() * 50) + 10}.jpg`;
+    this.cdr.detectChanges();
+  }
 }
 ```