Skip to content

Commit

Permalink
fix(abc:cell): fix can't change detection of widget (#1787)
Browse files Browse the repository at this point in the history
  • Loading branch information
cipchk authored Mar 18, 2024
1 parent 0fba461 commit e9753cb
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 10 deletions.
12 changes: 6 additions & 6 deletions packages/abc/cell/cell-host.directive.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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) {
Expand All @@ -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;
}
}
1 change: 1 addition & 0 deletions packages/abc/cell/cell.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
12 changes: 8 additions & 4 deletions packages/abc/cell/demo/simple.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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;
Expand Down Expand Up @@ -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();
}
}
```

0 comments on commit e9753cb

Please sign in to comment.