fix: update i18n pipe on locale change (#512)

.changeset/hot-dodos-help.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: update i18n pipe on locale change

src/i18n/i18n.pipe.ts

@@ -1,14 +1,36 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  OnDestroy,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
 
 import { I18nService } from './i18n.service';
 import { StringMap } from './i18n.type';
 
 @Pipe({
   name: 'auiI18n',
+  pure: false,
 })
-export class I18nPipe implements PipeTransform {
-  constructor(private readonly i18n: I18nService) {}
+export class I18nPipe implements PipeTransform, OnDestroy {
+  private readonly destroy$$ = new Subject<void>();
+
+  constructor(
+    private readonly i18n: I18nService,
+    private readonly cdr: ChangeDetectorRef,
+  ) {
+    this.i18n.localeChange$
+      .pipe(takeUntil(this.destroy$$))
+      .subscribe(() => this.cdr.markForCheck());
+  }
+
   transform(value: any, data?: StringMap) {
     return this.i18n.translate(value, data);
   }
+
+  ngOnDestroy(): void {
+    this.destroy$$.next();
+    this.destroy$$.complete();
+  }
 }

stories/rangepicker/basic.component.ts

@@ -1,8 +1,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import dayjs from 'dayjs';
+import { Dayjs } from 'dayjs';
+
+import { I18nService, en, zh } from '@alauda/ui';
 
 @Component({
   template: `
+    <div>
+      Current Locale: {{ i18n.i18n.locale }}
+      <button (click)="changeLocale()">Toggle</button>
+    </div>
+
+    <br />
+
     <aui-range-picker
       [(ngModel)]="range"
       required
@@ -14,5 +23,11 @@ import dayjs from 'dayjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RangeBasicComponent {
-  range = [dayjs(), dayjs()];
+  range: [Dayjs, Dayjs] = null;
+
+  constructor(public i18n: I18nService) {}
+
+  changeLocale() {
+    this.i18n.setI18n(this.i18n.i18n.locale === 'en' ? zh : en);
+  }
 }