Skip to content

Commit 0e095a1

Browse files
LafferyLaffery
authored
fix(module:result): nz-result-icon in ng-content does not work (#9511)
1 parent 6f79005 commit 0e095a1

File tree

6 files changed

+58
-90
lines changed

6 files changed

+58
-90
lines changed

‎components/result/demo/custom.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { NzResultModule } from 'ng-zorro-antd/result';
77
selector: 'nz-demo-result-custom',
88
imports: [NzButtonModule, NzResultModule],
99
template: `
10-
<nz-result nzIcon="smile-twotone" nzTitle="Great, we have done all the operators!">
10+
<nz-result nzIcon="smile-o" nzTitle="Great, we have done all the operators!">
1111
<div nz-result-extra>
1212
<button nz-button nzType="primary">Next</button>
1313
</div>

‎components/result/doc/index.en-US.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ Use when important operations need to inform the user to process the results and
2727

2828
You can use these directives as children of nz-result.
2929

30-
| Directive | Description |
31-
| ---------------------------------------- | ---------------------------------------- |
32-
| `i[nz-result-icon], div[nz-result-icon]` | custom icon |
33-
| `div[nz-result-title]` | title |
34-
| `div[nz-result-subtitle]` | subtitle |
35-
| `div[nz-result-content]` | contents, for detailed explanations |
36-
| `div[nz-result-extra]` | extra content, usually an operating area |
30+
| Directive | Description |
31+
| ------------------------- | ---------------------------------------- |
32+
| `[nz-result-icon]` | custom icon |
33+
| `div[nz-result-title]` | title |
34+
| `div[nz-result-subtitle]` | subtitle |
35+
| `div[nz-result-content]` | contents, for detailed explanations |
36+
| `div[nz-result-extra]` | extra content, usually an operating area |

‎components/result/doc/index.zh-CN.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ description: 用于反馈一系列操作任务的处理结果。
2828

2929
你可以在 nz-result 中加入如下指令，它们的优先级低于上面的参数。
3030

31-
| 元素 | 说明 |
32-
| ---------------------------------------- | ------------------------ |
33-
| `i[nz-result-icon], div[nz-result-icon]` | 在顶部展示的大图标 |
34-
| `div[nz-result-title]` | 标题 |
35-
| `div[nz-result-subtitle]` | 副标题 |
36-
| `div[nz-result-content]` | 内容，可以展示详细的信息 |
37-
| `div[nz-result-extra]` | 操作区域 |
31+
| 元素 | 说明 |
32+
| ------------------------- | ------------------------ |
33+
| `[nz-result-icon]` | 在顶部展示的大图标 |
34+
| `div[nz-result-title]` | 标题 |
35+
| `div[nz-result-subtitle]` | 副标题 |
36+
| `div[nz-result-content]` | 内容，可以展示详细的信息 |
37+
| `div[nz-result-extra]` | 操作区域 |

‎components/result/result-cells.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class NzResultTitleDirective {}
2424
export class NzResultSubtitleDirective {}
2525

2626
@Directive({
27-
selector: 'i[nz-result-icon], div[nz-result-icon]',
27+
selector: '[nz-result-icon]',
2828
exportAs: 'nzResultIcon'
2929
})
3030
export class NzResultIconDirective {}

‎components/result/result.component.ts‎

Lines changed: 37 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,16 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { Direction, Directionality } from '@angular/cdk/bidi';
6+
import { Directionality } from '@angular/cdk/bidi';
77
import {
88
ChangeDetectionStrategy,
9-
ChangeDetectorRef,
109
Component,
11-
DestroyRef,
10+
computed,
1211
inject,
13-
Input,
14-
OnChanges,
15-
OnInit,
12+
input,
1613
TemplateRef,
1714
ViewEncapsulation
1815
} from '@angular/core';
19-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
2016

2117
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2218
import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -29,7 +25,7 @@ export type NzResultIconType = 'success' | 'error' | 'info' | 'warning';
2925
export type NzExceptionStatusType = '404' | '500' | '403';
3026
export type NzResultStatusType = NzExceptionStatusType | NzResultIconType;
3127

32-
const IconMap = {
28+
const IconMap: Record<NzResultIconType, string> = {
3329
success: 'check-circle',
3430
error: 'close-circle',
3531
info: 'exclamation-circle',
@@ -42,16 +38,16 @@ const ExceptionStatus = ['404', '500', '403'];
4238
exportAs: 'nzResult',
4339
template: `
4440
<div class="ant-result-icon">
45-
@if (!isException) {
46-
@if (icon) {
47-
<ng-container *nzStringTemplateOutlet="icon; let icon">
41+
@if (!isException()) {
42+
@if (icon()) {
43+
<ng-container *nzStringTemplateOutlet="icon(); let icon">
4844
<nz-icon [nzType]="icon" nzTheme="fill" />
4945
</ng-container>
5046
} @else {
5147
<ng-content select="[nz-result-icon]"></ng-content>
5248
}
5349
} @else {
54-
@switch (nzStatus) {
50+
@switch (nzStatus()) {
5551
@case ('404') {
5652
<nz-result-not-found />
5753
}
@@ -64,37 +60,32 @@ const ExceptionStatus = ['404', '500', '403'];
6460
}
6561
}
6662
</div>
67-
@if (nzTitle) {
68-
<div class="ant-result-title" *nzStringTemplateOutlet="nzTitle">
69-
{{ nzTitle }}
63+
@if (nzTitle()) {
64+
<div class="ant-result-title" *nzStringTemplateOutlet="nzTitle()">
65+
{{ nzTitle() }}
7066
</div>
7167
} @else {
7268
<ng-content select="div[nz-result-title]"></ng-content>
7369
}
7470
75-
@if (nzSubTitle) {
76-
<div class="ant-result-subtitle" *nzStringTemplateOutlet="nzSubTitle">
77-
{{ nzSubTitle }}
71+
@if (nzSubTitle()) {
72+
<div class="ant-result-subtitle" *nzStringTemplateOutlet="nzSubTitle()">
73+
{{ nzSubTitle() }}
7874
</div>
7975
} @else {
8076
<ng-content select="div[nz-result-subtitle]"></ng-content>
8177
}
8278
<ng-content select="nz-result-content, [nz-result-content]"></ng-content>
83-
@if (nzExtra) {
84-
<div class="ant-result-extra" *nzStringTemplateOutlet="nzExtra">
85-
{{ nzExtra }}
79+
@if (nzExtra()) {
80+
<div class="ant-result-extra" *nzStringTemplateOutlet="nzExtra()">
81+
{{ nzExtra() }}
8682
</div>
8783
} @else {
8884
<ng-content select="div[nz-result-extra]"></ng-content>
8985
}
9086
`,
9187
host: {
92-
class: 'ant-result',
93-
'[class.ant-result-success]': `nzStatus === 'success'`,
94-
'[class.ant-result-error]': `nzStatus === 'error'`,
95-
'[class.ant-result-info]': `nzStatus === 'info'`,
96-
'[class.ant-result-warning]': `nzStatus === 'warning'`,
97-
'[class.ant-result-rtl]': `dir === 'rtl'`
88+
'[class]': 'class()'
9889
},
9990
imports: [
10091
NzOutletModule,
@@ -106,44 +97,26 @@ const ExceptionStatus = ['404', '500', '403'];
10697
changeDetection: ChangeDetectionStrategy.OnPush,
10798
encapsulation: ViewEncapsulation.None
10899
})
109-
export class NzResultComponent implements OnChanges, OnInit {
110-
private cdr = inject(ChangeDetectorRef);
111-
private directionality = inject(Directionality);
112-
private destroyRef = inject(DestroyRef);
100+
export class NzResultComponent {
101+
private readonly dir = inject(Directionality).valueSignal;
113102

114-
@Input() nzIcon?: string | TemplateRef<void>;
115-
@Input() nzTitle?: string | TemplateRef<void>;
116-
@Input() nzStatus: NzResultStatusType = 'info';
117-
@Input() nzSubTitle?: string | TemplateRef<void>;
118-
@Input() nzExtra?: string | TemplateRef<void>;
103+
readonly nzIcon = input<string | TemplateRef<void>>();
104+
readonly nzTitle = input<string | TemplateRef<void>>();
105+
readonly nzSubTitle = input<string | TemplateRef<void>>();
106+
readonly nzExtra = input<string | TemplateRef<void>>();
107+
readonly nzStatus = input<NzResultStatusType>('info');
119108

120-
icon?: string | TemplateRef<void>;
121-
isException = false;
122-
dir: Direction = 'ltr';
109+
protected readonly class = computed(() => {
110+
return {
111+
'ant-result': true,
112+
[`ant-result-${this.nzStatus()}`]: true,
113+
'ant-result-rtl': this.dir() === 'rtl'
114+
};
115+
});
123116

124-
ngOnInit(): void {
125-
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
126-
this.dir = direction;
127-
this.cdr.detectChanges();
128-
});
129-
130-
this.dir = this.directionality.value;
131-
}
132-
133-
ngOnChanges(): void {
134-
this.setStatusIcon();
135-
}
136-
137-
private setStatusIcon(): void {
138-
const icon = this.nzIcon;
139-
140-
this.isException = ExceptionStatus.indexOf(this.nzStatus) !== -1;
141-
this.icon = icon
142-
? typeof icon === 'string'
143-
? IconMap[icon as NzResultIconType] || icon
144-
: icon
145-
: this.isException
146-
? undefined
147-
: IconMap[this.nzStatus as NzResultIconType];
148-
}
117+
readonly isException = computed(() => ExceptionStatus.indexOf(this.nzStatus()) !== -1);
118+
readonly icon = computed(() => {
119+
const icon = this.nzIcon();
120+
return typeof icon === 'string' ? IconMap[icon as NzResultIconType] || icon : icon;
121+
});
149122
}

‎components/result/result.spec.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
7-
import { Component, DebugElement, ViewChild } from '@angular/core';
6+
import { BidiModule, Direction } from '@angular/cdk/bidi';
7+
import { Component, DebugElement } from '@angular/core';
88
import { ComponentFixture, TestBed } from '@angular/core/testing';
99
import { By } from '@angular/platform-browser';
1010

@@ -37,14 +37,9 @@ export class NzTestResultBasicComponent {
3737

3838
@Component({
3939
imports: [BidiModule, NzTestResultBasicComponent],
40-
template: `
41-
<div [dir]="direction">
42-
<nz-test-basic-result></nz-test-basic-result>
43-
</div>
44-
`
40+
template: `<nz-test-basic-result [dir]="direction" />`
4541
})
4642
export class NzTestResultRtlComponent {
47-
@ViewChild(Dir) dir!: Dir;
4843
direction: Direction = 'rtl';
4944
}
5045

@@ -99,14 +94,14 @@ describe('nz-result', () => {
9994
});
10095

10196
it('should icon overlap status', () => {
102-
testComponent.icon = undefined;
97+
testComponent.icon = 'smile-o';
10398
fixture.detectChanges();
10499

105100
const iconView = resultEl.nativeElement.querySelector('.ant-result-icon');
106101

107102
expect(resultEl.nativeElement.classList).toContain('ant-result');
108103
expect(resultEl.nativeElement.classList).toContain('ant-result-error'); // should status work
109-
expect(iconView.firstElementChild.classList).toContain('anticon-close-circle');
104+
expect(iconView.firstElementChild.classList).toContain('anticon-smile-o');
110105
});
111106
});
112107

0 commit comments

Comments
 (0)