fix(module:*): cancel support for HTML string rendering (#8831)

NG-ZORRO · Nov 25, 2024 · 5fae01a · 5fae01a
1 parent f08ad1c
commit 5fae01a
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 138 deletions.
diff --git a/components/color-picker/color-picker.component.spec.ts b/components/color-picker/color-picker.component.spec.ts
@@ -1,6 +1,6 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, inject, tick, discardPeriodicTasks, TestBed } from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -126,9 +126,9 @@ describe('nz-color-picker', () => {
     const dom = resultEl.nativeElement.querySelector('.ant-color-picker-trigger');
     dispatchMouseEvent(dom, 'click');
     waitingForTooltipToggling();
-    expect(
-      overlayContainerElement.querySelector('.ant-color-picker-title-content')?.querySelector('span')?.innerText
-    ).toBe('Color Picker');
+    expect(overlayContainerElement.querySelector('.ant-color-picker-title-content')?.textContent?.trim()).toBe(
+      'Color Picker'
+    );
   }));
 
   it('color-picker nzFlipFlop', () => {

diff --git a/components/color-picker/color-picker.component.ts b/components/color-picker/color-picker.component.ts
@@ -23,8 +23,8 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
-import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
 import { NzPopoverDirective } from 'ng-zorro-antd/popover';
 
 import { NzColorBlockComponent } from './color-block.component';
@@ -43,7 +43,8 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
     NzPopoverDirective,
     NzColorBlockComponent,
     NzColorFormatComponent,
-    NgTemplateOutlet
+    NgTemplateOutlet,
+    NzStringTemplateOutletDirective
   ],
   template: `
     <div
@@ -82,12 +83,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
       @if (nzTitle || nzAllowClear) {
         <div class="ant-color-picker-title">
           <div class="ant-color-picker-title-content">
-            @if (isNzTitleTemplateRef) {
-              <ng-container *ngTemplateOutlet="$any(nzTitle)" />
-            }
-            @if (isNzTitleNonEmptyString) {
-              <span [innerHTML]="nzTitle"></span>
-            }
+            <ng-template [nzStringTemplateOutlet]="nzTitle">{{ nzTitle }}</ng-template>
           </div>
           @if (nzAllowClear) {
             <div class="ant-color-picker-clear" (click)="clearColorHandle()"></div>
@@ -136,8 +132,6 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
   @Output() readonly nzOnClear = new EventEmitter<boolean>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
 
-  protected readonly isTemplateRef = isTemplateRef;
-  protected readonly isNonEmptyString = isNonEmptyString;
   private destroy$ = new Subject<void>();
   private isNzDisableFirstChange: boolean = true;
   blockColor: string = '';
@@ -235,12 +229,4 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
     this.destroy$.next();
     this.destroy$.complete();
   }
-
-  get isNzTitleNonEmptyString(): boolean {
-    return isNonEmptyString(this.nzTitle);
-  }
-
-  get isNzTitleTemplateRef(): boolean {
-    return isTemplateRef(this.nzTitle);
-  }
 }
diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
@@ -18,30 +18,25 @@ import {
 } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
-import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
 
 import { transCompatFormat } from './lib/util';
 import { PREFIX_CLASS } from './util';
 
 @Component({
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'calendar-footer',
   exportAs: 'calendarFooter',
+  standalone: true,
+  imports: [NgTemplateOutlet, NzButtonModule, NzStringTemplateOutletDirective],
   template: `
     <div class="{{ prefixCls }}-footer">
       @if (extraFooter) {
         <div class="{{ prefixCls }}-footer-extra">
-          @if (isExtraFooterTemplateRef) {
-            <ng-container *ngTemplateOutlet="$any(extraFooter)" />
-          }
-          @if (isExtraFooterNonEmptyString) {
-            <span [innerHTML]="extraFooter"></span>
-          }
+          <ng-template [nzStringTemplateOutlet]="extraFooter">{{ extraFooter }}</ng-template>
         </div>
       }
 
@@ -85,8 +80,8 @@ import { PREFIX_CLASS } from './util';
       }
     </div>
   `,
-  imports: [NgTemplateOutlet, NzButtonModule],
-  standalone: true
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CalendarFooterComponent implements OnChanges {
   @Input() locale!: NzCalendarI18nInterface;
@@ -104,8 +99,6 @@ export class CalendarFooterComponent implements OnChanges {
   @Output() readonly clickToday = new EventEmitter<CandyDate>();
 
   prefixCls: string = PREFIX_CLASS;
-  isTemplateRef = isTemplateRef;
-  isNonEmptyString = isNonEmptyString;
   isTodayDisabled: boolean = false;
   todayTitle: string = '';
 
@@ -127,12 +120,4 @@ export class CalendarFooterComponent implements OnChanges {
     const now: CandyDate = new CandyDate();
     this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone
   }
-
-  get isExtraFooterTemplateRef(): boolean {
-    return isTemplateRef(this.extraFooter);
-  }
-
-  get isExtraFooterNonEmptyString(): boolean {
-    return isNonEmptyString(this.extraFooter);
-  }
 }
diff --git a/components/date-picker/lib/abstract-table.html b/components/date-picker/lib/abstract-table.html
@@ -6,7 +6,7 @@
           <th role="columnheader"></th>
         }
         @for (cell of headRow; track $index) {
-          <th role="columnheader" title="{{ cell.title }}"> {{ cell.content }}</th>
+          <th role="columnheader" [title]="cell.title"> {{ cell.content }}</th>
         }
       </tr>
     </thead>
@@ -20,39 +20,41 @@
         }
         @for (cell of row.dateCells; track cell.trackByIndex) {
           <td
-            title="{{ cell.title }}"
+            [title]="cell.title"
             role="gridcell"
             [ngClass]="cell.classMap!"
             (click)="cell.isDisabled ? null : cell.onClick()"
-            (mouseenter)="cell.onMouseEnter()"
-          >
+            (mouseenter)="cell.onMouseEnter()">
             @switch (prefixCls) {
               @case ('ant-picker') {
-                @if (cell.isTemplateRef) {
-                  <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }" />
-                } @else if (cell.isNonEmptyString) {
-                  <span [innerHTML]="cell.cellRender"></span>
+                @if (cell.cellRender) {
+                  <ng-template
+                    [nzStringTemplateOutlet]="cell.cellRender"
+                    [nzStringTemplateOutletContext]="{ $implicit: cell.value }">
+                    {{ cell.cellRender }}
+                  </ng-template>
                 } @else {
                   <div
                     class="{{ prefixCls }}-cell-inner"
                     [attr.aria-selected]="cell.isSelected"
-                    [attr.aria-disabled]="cell.isDisabled"
-                  >
+                    [attr.aria-disabled]="cell.isDisabled">
                     {{ cell.content }}
                   </div>
                 }
               }
               @case ('ant-picker-calendar') {
                 <div
                   class="{{ prefixCls }}-date ant-picker-cell-inner"
-                  [class.ant-picker-calendar-date-today]="cell.isToday"
-                >
+                  [class.ant-picker-calendar-date-today]="cell.isToday">
                   @if (cell.fullCellRender) {
-                    <ng-container *ngTemplateOutlet="$any(cell.fullCellRender); context: { $implicit: cell.value }" />
+                    <ng-container *nzStringTemplateOutlet="cell.fullCellRender; context: { $implicit: cell.value }">
+                      {{ cell.fullCellRender }}
+                    </ng-container>
                   } @else {
                     <div class="{{ prefixCls }}-date-value">{{ cell.content }}</div>
                     <div class="{{ prefixCls }}-date-content">
-                      <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }">
+                      <ng-container *nzStringTemplateOutlet="cell.cellRender; context: { $implicit: cell.value }">
+                        {{ cell.cellRender }}
                       </ng-container>
                     </div>
                   }
@@ -61,7 +63,6 @@
             }
           </td>
         }
-
       </tr>
     }
   </tbody>

diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts
@@ -3,13 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgSwitch, NgTemplateOutlet } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
-import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
+import { valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzCalendarI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
 import { transCompatFormat } from './util';
@@ -22,7 +23,7 @@ import { transCompatFormat } from './util';
   exportAs: 'dateTable',
   templateUrl: './abstract-table.html',
   standalone: true,
-  imports: [NgClass, NgSwitch, NgTemplateOutlet]
+  imports: [NgClass, NzStringTemplateOutletDirective]
 })
 export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
   @Input() override locale!: NzCalendarI18nInterface;
@@ -53,8 +54,8 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
         content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()), // eg. Tu,
         isSelected: false,
         isDisabled: false,
-        onClick(): void {},
-        onMouseEnter(): void {}
+        onClick(): void { },
+        onMouseEnter(): void { }
       });
     }
     return weekDays;
@@ -116,8 +117,6 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
   }
 
   addCellProperty(cell: DateCell, date: CandyDate): void {
-    cell.isTemplateRef = isTemplateRef(cell.cellRender);
-    cell.isNonEmptyString =  isNonEmptyString(cell.cellRender);
     if (this.hasRangeValue() && !this.canSelectWeek) {
       const [startHover, endHover] = this.hoverValue;
       const [startSelected, endSelected] = this.selectedValue;

diff --git a/components/date-picker/lib/decade-table.component.ts b/components/date-picker/lib/decade-table.component.ts
@@ -3,9 +3,10 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnChanges, ViewEncapsulation } from '@angular/core';
 
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell, DecadeCell } from './interface';
 
@@ -20,7 +21,7 @@ const MAX_COL = 3;
   exportAs: 'decadeTable',
   templateUrl: 'abstract-table.html',
   standalone: true,
-  imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
+  imports: [NgClass, NzStringTemplateOutletDirective]
 })
 export class DecadeTableComponent extends AbstractTable implements OnChanges {
   get startYear(): number {
@@ -64,8 +65,8 @@ export class DecadeTableComponent extends AbstractTable implements OnChanges {
           isLowerThanStart: end < startYear,
           isBiggerThanEnd: start > endYear,
           classMap: {},
-          onClick(): void {},
-          onMouseEnter(): void {}
+          onClick(): void { },
+          onMouseEnter(): void { }
         };
 
         cell.classMap = this.getClassMap(cell);

diff --git a/components/date-picker/lib/interface.ts b/components/date-picker/lib/interface.ts
@@ -39,8 +39,6 @@ export interface DateCell {
   isRangeEndNearHover?: boolean;
   isFirstCellInPanel?: boolean;
   isLastCellInPanel?: boolean;
-  isTemplateRef ?: boolean;
-  isNonEmptyString ?: boolean;
 }
 
 export interface DateBodyRow {

diff --git a/components/date-picker/lib/month-table.component.ts b/components/date-picker/lib/month-table.component.ts
@@ -3,13 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService } from 'ng-zorro-antd/i18n';
 
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
 
@@ -21,7 +22,7 @@ import { DateBodyRow, DateCell } from './interface';
   exportAs: 'monthTable',
   templateUrl: 'abstract-table.html',
   standalone: true,
-  imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
+  imports: [NgClass, NzStringTemplateOutletDirective]
 })
 export class MonthTableComponent extends AbstractTable implements OnChanges, OnInit {
   override MAX_ROW = 4;

diff --git a/components/date-picker/lib/quarter-table.component.ts b/components/date-picker/lib/quarter-table.component.ts
@@ -3,15 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { startOfQuarter } from 'date-fns';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
-import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
+import { valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService } from 'ng-zorro-antd/i18n';
 
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
 
@@ -23,7 +24,7 @@ import { DateBodyRow, DateCell } from './interface';
   exportAs: 'quarterTable',
   templateUrl: 'abstract-table.html',
   standalone: true,
-  imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
+  imports: [NgClass, NzStringTemplateOutletDirective]
 })
 export class QuarterTableComponent extends AbstractTable implements OnChanges, OnInit {
   override MAX_ROW = 1;
@@ -90,9 +91,6 @@ export class QuarterTableComponent extends AbstractTable implements OnChanges, O
   }
 
   private addCellProperty(cell: DateCell, month: CandyDate): void {
-    cell.isTemplateRef = isTemplateRef(cell.cellRender);
-    cell.isNonEmptyString = isNonEmptyString(cell.cellRender);
-
     if (this.hasRangeValue()) {
       const [startHover, endHover] = this.hoverValue;
       const [startSelected, endSelected] = this.selectedValue;

diff --git a/components/date-picker/lib/year-table.component.ts b/components/date-picker/lib/year-table.component.ts
@@ -9,9 +9,10 @@ import { CandyDate } from 'ng-zorro-antd/core/time';
 import { valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService } from 'ng-zorro-antd/i18n';
 
+import { NgClass } from '@angular/common';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell, YearCell } from './interface';
-import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -20,7 +21,7 @@ import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemp
   selector: 'year-table',
   exportAs: 'yearTable',
   templateUrl: 'abstract-table.html',
-  imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault],
+  imports: [NgClass, NzStringTemplateOutletDirective],
   standalone: true
 })
 export class YearTableComponent extends AbstractTable {