Skip to content

Commit 5fae01a

Browse files
HyperLife1119HyperLife1119
authored
fix(module:*): cancel support for HTML string rendering (#8831)
1 parent f08ad1c commit 5fae01a

13 files changed

+64
-138
lines changed

‎components/color-picker/color-picker.component.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { OverlayContainer } from '@angular/cdk/overlay';
22
import { Component, DebugElement } from '@angular/core';
3-
import { ComponentFixture, fakeAsync, inject, tick, discardPeriodicTasks, TestBed } from '@angular/core/testing';
3+
import { ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
44
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
55
import { By } from '@angular/platform-browser';
66
import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -126,9 +126,9 @@ describe('nz-color-picker', () => {
126126
const dom = resultEl.nativeElement.querySelector('.ant-color-picker-trigger');
127127
dispatchMouseEvent(dom, 'click');
128128
waitingForTooltipToggling();
129-
expect(
130-
overlayContainerElement.querySelector('.ant-color-picker-title-content')?.querySelector('span')?.innerText
131-
).toBe('Color Picker');
129+
expect(overlayContainerElement.querySelector('.ant-color-picker-title-content')?.textContent?.trim()).toBe(
130+
'Color Picker'
131+
);
132132
}));
133133

134134
it('color-picker nzFlipFlop', () => {

‎components/color-picker/color-picker.component.ts

+4-18
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
2323
import { Subject } from 'rxjs';
2424
import { takeUntil } from 'rxjs/operators';
2525

26+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
2627
import { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
27-
import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
2828
import { NzPopoverDirective } from 'ng-zorro-antd/popover';
2929

3030
import { NzColorBlockComponent } from './color-block.component';
@@ -43,7 +43,8 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
4343
NzPopoverDirective,
4444
NzColorBlockComponent,
4545
NzColorFormatComponent,
46-
NgTemplateOutlet
46+
NgTemplateOutlet,
47+
NzStringTemplateOutletDirective
4748
],
4849
template: `
4950
<div
@@ -82,12 +83,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
8283
@if (nzTitle || nzAllowClear) {
8384
<div class="ant-color-picker-title">
8485
<div class="ant-color-picker-title-content">
85-
@if (isNzTitleTemplateRef) {
86-
<ng-container *ngTemplateOutlet="$any(nzTitle)" />
87-
}
88-
@if (isNzTitleNonEmptyString) {
89-
<span [innerHTML]="nzTitle"></span>
90-
}
86+
<ng-template [nzStringTemplateOutlet]="nzTitle">{{ nzTitle }}</ng-template>
9187
</div>
9288
@if (nzAllowClear) {
9389
<div class="ant-color-picker-clear" (click)="clearColorHandle()"></div>
@@ -136,8 +132,6 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
136132
@Output() readonly nzOnClear = new EventEmitter<boolean>();
137133
@Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
138134

139-
protected readonly isTemplateRef = isTemplateRef;
140-
protected readonly isNonEmptyString = isNonEmptyString;
141135
private destroy$ = new Subject<void>();
142136
private isNzDisableFirstChange: boolean = true;
143137
blockColor: string = '';
@@ -235,12 +229,4 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
235229
this.destroy$.next();
236230
this.destroy$.complete();
237231
}
238-
239-
get isNzTitleNonEmptyString(): boolean {
240-
return isNonEmptyString(this.nzTitle);
241-
}
242-
243-
get isNzTitleTemplateRef(): boolean {
244-
return isTemplateRef(this.nzTitle);
245-
}
246232
}

‎components/date-picker/calendar-footer.component.ts

+6-21
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,25 @@ import {
1818
} from '@angular/core';
1919

2020
import { NzButtonModule } from 'ng-zorro-antd/button';
21+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
2122
import { CandyDate } from 'ng-zorro-antd/core/time';
2223
import { NzSafeAny } from 'ng-zorro-antd/core/types';
23-
import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
2424
import { DateHelperService, NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
2525

2626
import { transCompatFormat } from './lib/util';
2727
import { PREFIX_CLASS } from './util';
2828

2929
@Component({
30-
encapsulation: ViewEncapsulation.None,
31-
changeDetection: ChangeDetectionStrategy.OnPush,
3230
// eslint-disable-next-line @angular-eslint/component-selector
3331
selector: 'calendar-footer',
3432
exportAs: 'calendarFooter',
33+
standalone: true,
34+
imports: [NgTemplateOutlet, NzButtonModule, NzStringTemplateOutletDirective],
3535
template: `
3636
<div class="{{ prefixCls }}-footer">
3737
@if (extraFooter) {
3838
<div class="{{ prefixCls }}-footer-extra">
39-
@if (isExtraFooterTemplateRef) {
40-
<ng-container *ngTemplateOutlet="$any(extraFooter)" />
41-
}
42-
@if (isExtraFooterNonEmptyString) {
43-
<span [innerHTML]="extraFooter"></span>
44-
}
39+
<ng-template [nzStringTemplateOutlet]="extraFooter">{{ extraFooter }}</ng-template>
4540
</div>
4641
}
4742
@@ -85,8 +80,8 @@ import { PREFIX_CLASS } from './util';
8580
}
8681
</div>
8782
`,
88-
imports: [NgTemplateOutlet, NzButtonModule],
89-
standalone: true
83+
encapsulation: ViewEncapsulation.None,
84+
changeDetection: ChangeDetectionStrategy.OnPush
9085
})
9186
export class CalendarFooterComponent implements OnChanges {
9287
@Input() locale!: NzCalendarI18nInterface;
@@ -104,8 +99,6 @@ export class CalendarFooterComponent implements OnChanges {
10499
@Output() readonly clickToday = new EventEmitter<CandyDate>();
105100

106101
prefixCls: string = PREFIX_CLASS;
107-
isTemplateRef = isTemplateRef;
108-
isNonEmptyString = isNonEmptyString;
109102
isTodayDisabled: boolean = false;
110103
todayTitle: string = '';
111104

@@ -127,12 +120,4 @@ export class CalendarFooterComponent implements OnChanges {
127120
const now: CandyDate = new CandyDate();
128121
this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone
129122
}
130-
131-
get isExtraFooterTemplateRef(): boolean {
132-
return isTemplateRef(this.extraFooter);
133-
}
134-
135-
get isExtraFooterNonEmptyString(): boolean {
136-
return isNonEmptyString(this.extraFooter);
137-
}
138123
}

‎components/date-picker/lib/abstract-table.html

+16-15
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<th role="columnheader"></th>
77
}
88
@for (cell of headRow; track $index) {
9-
<th role="columnheader" title="{{ cell.title }}"> {{ cell.content }}</th>
9+
<th role="columnheader" [title]="cell.title"> {{ cell.content }}</th>
1010
}
1111
</tr>
1212
</thead>
@@ -20,39 +20,41 @@
2020
}
2121
@for (cell of row.dateCells; track cell.trackByIndex) {
2222
<td
23-
title="{{ cell.title }}"
23+
[title]="cell.title"
2424
role="gridcell"
2525
[ngClass]="cell.classMap!"
2626
(click)="cell.isDisabled ? null : cell.onClick()"
27-
(mouseenter)="cell.onMouseEnter()"
28-
>
27+
(mouseenter)="cell.onMouseEnter()">
2928
@switch (prefixCls) {
3029
@case ('ant-picker') {
31-
@if (cell.isTemplateRef) {
32-
<ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }" />
33-
} @else if (cell.isNonEmptyString) {
34-
<span [innerHTML]="cell.cellRender"></span>
30+
@if (cell.cellRender) {
31+
<ng-template
32+
[nzStringTemplateOutlet]="cell.cellRender"
33+
[nzStringTemplateOutletContext]="{ $implicit: cell.value }">
34+
{{ cell.cellRender }}
35+
</ng-template>
3536
} @else {
3637
<div
3738
class="{{ prefixCls }}-cell-inner"
3839
[attr.aria-selected]="cell.isSelected"
39-
[attr.aria-disabled]="cell.isDisabled"
40-
>
40+
[attr.aria-disabled]="cell.isDisabled">
4141
{{ cell.content }}
4242
</div>
4343
}
4444
}
4545
@case ('ant-picker-calendar') {
4646
<div
4747
class="{{ prefixCls }}-date ant-picker-cell-inner"
48-
[class.ant-picker-calendar-date-today]="cell.isToday"
49-
>
48+
[class.ant-picker-calendar-date-today]="cell.isToday">
5049
@if (cell.fullCellRender) {
51-
<ng-container *ngTemplateOutlet="$any(cell.fullCellRender); context: { $implicit: cell.value }" />
50+
<ng-container *nzStringTemplateOutlet="cell.fullCellRender; context: { $implicit: cell.value }">
51+
{{ cell.fullCellRender }}
52+
</ng-container>
5253
} @else {
5354
<div class="{{ prefixCls }}-date-value">{{ cell.content }}</div>
5455
<div class="{{ prefixCls }}-date-content">
55-
<ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }">
56+
<ng-container *nzStringTemplateOutlet="cell.cellRender; context: { $implicit: cell.value }">
57+
{{ cell.cellRender }}
5658
</ng-container>
5759
</div>
5860
}
@@ -61,7 +63,6 @@
6163
}
6264
</td>
6365
}
64-
6566
</tr>
6667
}
6768
</tbody>

‎components/date-picker/lib/date-table.component.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { NgClass, NgSwitch, NgTemplateOutlet } from '@angular/common';
6+
import { NgClass } from '@angular/common';
77
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
88

99
import { CandyDate } from 'ng-zorro-antd/core/time';
10-
import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
10+
import { valueFunctionProp } from 'ng-zorro-antd/core/util';
1111
import { DateHelperService, NzCalendarI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
1212

13+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
1314
import { AbstractTable } from './abstract-table';
1415
import { DateBodyRow, DateCell } from './interface';
1516
import { transCompatFormat } from './util';
@@ -22,7 +23,7 @@ import { transCompatFormat } from './util';
2223
exportAs: 'dateTable',
2324
templateUrl: './abstract-table.html',
2425
standalone: true,
25-
imports: [NgClass, NgSwitch, NgTemplateOutlet]
26+
imports: [NgClass, NzStringTemplateOutletDirective]
2627
})
2728
export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
2829
@Input() override locale!: NzCalendarI18nInterface;
@@ -53,8 +54,8 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
5354
content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()), // eg. Tu,
5455
isSelected: false,
5556
isDisabled: false,
56-
onClick(): void {},
57-
onMouseEnter(): void {}
57+
onClick(): void { },
58+
onMouseEnter(): void { }
5859
});
5960
}
6061
return weekDays;
@@ -116,8 +117,6 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
116117
}
117118

118119
addCellProperty(cell: DateCell, date: CandyDate): void {
119-
cell.isTemplateRef = isTemplateRef(cell.cellRender);
120-
cell.isNonEmptyString = isNonEmptyString(cell.cellRender);
121120
if (this.hasRangeValue() && !this.canSelectWeek) {
122121
const [startHover, endHover] = this.hoverValue;
123122
const [startSelected, endSelected] = this.selectedValue;

‎components/date-picker/lib/decade-table.component.ts

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

6-
import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
6+
import { NgClass } from '@angular/common';
77
import { ChangeDetectionStrategy, Component, OnChanges, ViewEncapsulation } from '@angular/core';
88

9+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
910
import { AbstractTable } from './abstract-table';
1011
import { DateBodyRow, DateCell, DecadeCell } from './interface';
1112

@@ -20,7 +21,7 @@ const MAX_COL = 3;
2021
exportAs: 'decadeTable',
2122
templateUrl: 'abstract-table.html',
2223
standalone: true,
23-
imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
24+
imports: [NgClass, NzStringTemplateOutletDirective]
2425
})
2526
export class DecadeTableComponent extends AbstractTable implements OnChanges {
2627
get startYear(): number {
@@ -64,8 +65,8 @@ export class DecadeTableComponent extends AbstractTable implements OnChanges {
6465
isLowerThanStart: end < startYear,
6566
isBiggerThanEnd: start > endYear,
6667
classMap: {},
67-
onClick(): void {},
68-
onMouseEnter(): void {}
68+
onClick(): void { },
69+
onMouseEnter(): void { }
6970
};
7071

7172
cell.classMap = this.getClassMap(cell);

‎components/date-picker/lib/interface.ts

-2
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ export interface DateCell {
3939
isRangeEndNearHover?: boolean;
4040
isFirstCellInPanel?: boolean;
4141
isLastCellInPanel?: boolean;
42-
isTemplateRef ?: boolean;
43-
isNonEmptyString ?: boolean;
4442
}
4543

4644
export interface DateBodyRow {

‎components/date-picker/lib/month-table.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
6+
import { NgClass } from '@angular/common';
77
import { ChangeDetectionStrategy, Component, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
88

99
import { CandyDate } from 'ng-zorro-antd/core/time';
1010
import { valueFunctionProp } from 'ng-zorro-antd/core/util';
1111
import { DateHelperService } from 'ng-zorro-antd/i18n';
1212

13+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
1314
import { AbstractTable } from './abstract-table';
1415
import { DateBodyRow, DateCell } from './interface';
1516

@@ -21,7 +22,7 @@ import { DateBodyRow, DateCell } from './interface';
2122
exportAs: 'monthTable',
2223
templateUrl: 'abstract-table.html',
2324
standalone: true,
24-
imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
25+
imports: [NgClass, NzStringTemplateOutletDirective]
2526
})
2627
export class MonthTableComponent extends AbstractTable implements OnChanges, OnInit {
2728
override MAX_ROW = 4;

‎components/date-picker/lib/quarter-table.component.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
6+
import { NgClass } from '@angular/common';
77
import { ChangeDetectionStrategy, Component, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
88

99
import { startOfQuarter } from 'date-fns';
1010

1111
import { CandyDate } from 'ng-zorro-antd/core/time';
12-
import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
12+
import { valueFunctionProp } from 'ng-zorro-antd/core/util';
1313
import { DateHelperService } from 'ng-zorro-antd/i18n';
1414

15+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
1516
import { AbstractTable } from './abstract-table';
1617
import { DateBodyRow, DateCell } from './interface';
1718

@@ -23,7 +24,7 @@ import { DateBodyRow, DateCell } from './interface';
2324
exportAs: 'quarterTable',
2425
templateUrl: 'abstract-table.html',
2526
standalone: true,
26-
imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
27+
imports: [NgClass, NzStringTemplateOutletDirective]
2728
})
2829
export class QuarterTableComponent extends AbstractTable implements OnChanges, OnInit {
2930
override MAX_ROW = 1;
@@ -90,9 +91,6 @@ export class QuarterTableComponent extends AbstractTable implements OnChanges, O
9091
}
9192

9293
private addCellProperty(cell: DateCell, month: CandyDate): void {
93-
cell.isTemplateRef = isTemplateRef(cell.cellRender);
94-
cell.isNonEmptyString = isNonEmptyString(cell.cellRender);
95-
9694
if (this.hasRangeValue()) {
9795
const [startHover, endHover] = this.hoverValue;
9896
const [startSelected, endSelected] = this.selectedValue;

‎components/date-picker/lib/year-table.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import { CandyDate } from 'ng-zorro-antd/core/time';
99
import { valueFunctionProp } from 'ng-zorro-antd/core/util';
1010
import { DateHelperService } from 'ng-zorro-antd/i18n';
1111

12+
import { NgClass } from '@angular/common';
13+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
1214
import { AbstractTable } from './abstract-table';
1315
import { DateBodyRow, DateCell, YearCell } from './interface';
14-
import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
1516

1617
@Component({
1718
encapsulation: ViewEncapsulation.None,
@@ -20,7 +21,7 @@ import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemp
2021
selector: 'year-table',
2122
exportAs: 'yearTable',
2223
templateUrl: 'abstract-table.html',
23-
imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault],
24+
imports: [NgClass, NzStringTemplateOutletDirective],
2425
standalone: true
2526
})
2627
export class YearTableComponent extends AbstractTable {

0 commit comments

Comments
 (0)