fix(module:calendar): change language can fresh show calendar text

NG-ZORRO · Nov 5, 2023 · 50ccdec · 50ccdec
1 parent 50f6700
commit 50ccdec
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/components/calendar/calendar-header.component.ts b/components/calendar/calendar-header.component.ts
@@ -101,6 +101,9 @@ export class NzCalendarHeaderComponent implements OnInit {
   ngOnInit(): void {
     this.setUpYears();
     this.setUpMonths();
+    this.i18n.localeChange.subscribe(() => {
+      this.setUpMonths();
+    });
   }
 
   updateYear(year: number): void {

diff --git a/components/date-picker/lib/abstract-table.ts b/components/date-picker/lib/abstract-table.ts
@@ -3,11 +3,11 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange, SimpleChanges, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange, SimpleChanges, TemplateRef } from '@angular/core';
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { FunctionProp, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
-import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
+import { NzCalendarI18nInterface, DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n';
 import { DateBodyRow, DateCell } from './interface';
 
 @Directive()
@@ -78,8 +78,19 @@ export abstract class AbstractTable implements OnInit, OnChanges {
   abstract makeHeadRow(): DateCell[];
   abstract makeBodyRows(): DateBodyRow[];
 
+  constructor(
+    public i18n: NzI18nService,
+    public dateHelper: DateHelperService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
   ngOnInit(): void {
     this.render();
+    this.i18n.localeChange.subscribe(() => {
+      // 不添加changeDetectorRef会悬浮才改变
+      this.render();
+      this.changeDetectorRef.detectChanges();
+    });
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts
@@ -7,7 +7,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncap
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { valueFunctionProp } from 'ng-zorro-antd/core/util';
 
-import { DateHelperService, NzCalendarI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
+import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
 import { transCompatFormat } from './util';
@@ -23,10 +23,6 @@ import { transCompatFormat } from './util';
 export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
   @Input() override locale!: NzCalendarI18nInterface;
 
-  constructor(private i18n: NzI18nService, private dateHelper: DateHelperService) {
-    super();
-  }
-
   private changeValueFromInside(value: CandyDate): void {
     // Only change date not change time
     this.activeDate = this.activeDate.setYear(value.getYear()).setMonth(value.getMonth()).setDate(value.getDate());

diff --git a/components/date-picker/lib/lib-packer.spec.ts b/components/date-picker/lib/lib-packer.spec.ts
@@ -1,6 +1,7 @@
 import { registerLocaleData } from '@angular/common';
 import zh from '@angular/common/locales/zh';
 
+import { ChangeDetectorRef } from '@angular/core';
 import { fakeAsync, inject, TestBed } from '@angular/core/testing';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
@@ -16,6 +17,7 @@ describe('Coverage supplements', () => {
   let componentInstance: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   let dateHelper: DateHelperService;
   let i18n: NzI18nService;
+  let changeDetectorRef: ChangeDetectorRef;
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
@@ -25,10 +27,13 @@ describe('Coverage supplements', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([NzI18nService, DateHelperService], (i18nService: NzI18nService, dateHelperService: DateHelperService) => {
-    dateHelper = dateHelperService;
-    i18n = i18nService;
-  }));
+  beforeEach(inject(
+    [NzI18nService, DateHelperService],
+    (i18nService: NzI18nService, dateHelperService: DateHelperService) => {
+      dateHelper = dateHelperService;
+      i18n = i18nService;
+    }
+  ));
 
   // describe('CalendarHeader', () => {
   //   beforeEach(() => {
@@ -79,7 +84,7 @@ describe('Coverage supplements', () => {
   // TODO: Unit test of date-table and month-table
   describe('DateTable', () => {
     beforeEach(() => {
-      componentInstance = new DateTableComponent(i18n, dateHelper);
+      componentInstance = new DateTableComponent(i18n, dateHelper, changeDetectorRef);
     });
 
     it('should cover untouched branches', () => {
@@ -92,7 +97,7 @@ describe('Coverage supplements', () => {
 
   describe('MonthTable', () => {
     beforeEach(() => {
-      componentInstance = new MonthTableComponent(dateHelper);
+      componentInstance = new MonthTableComponent(i18n, dateHelper, changeDetectorRef);
     });
 
     it('should cover untouched branches', () => {

diff --git a/components/date-picker/lib/month-table.component.ts b/components/date-picker/lib/month-table.component.ts
@@ -6,7 +6,6 @@
 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 { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
 
@@ -22,10 +21,6 @@ export class MonthTableComponent extends AbstractTable implements OnChanges, OnI
   override MAX_ROW = 4;
   override MAX_COL = 3;
 
-  constructor(private dateHelper: DateHelperService) {
-    super();
-  }
-
   makeHeadRow(): DateCell[] {
     return [];
   }

diff --git a/components/date-picker/lib/year-table.component.ts b/components/date-picker/lib/year-table.component.ts
@@ -6,7 +6,6 @@
 import { ChangeDetectionStrategy, Component, 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 { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell, YearCell } from './interface';
 
@@ -22,10 +21,6 @@ export class YearTableComponent extends AbstractTable {
   override MAX_ROW = 4;
   override MAX_COL = 3;
 
-  constructor(private dateHelper: DateHelperService) {
-    super();
-  }
-
   makeHeadRow(): DateCell[] {
     return [];
   }