在管道中更改语言时如何更改日期格式

Question

我有一个管道，可让我根据'eeee d MMMM yyyy'的格式更改日期的格式。

我使用date-fns更改日期格式，并使用本地库更改翻译。

我也使用ngx-translate来翻译应用程序。

当我打开应用程序时，管道使用正确的翻译更改日期格式，但是当我更改语言时，管道不会更新。

这里是使用的管道：

   import { Pipe, PipeTransform } from '@angular/core';
   import { LangChangeEvent, TranslateService } from '@ngx- 
   translate/core';
   import { format } from 'date-fns';
   import { enGB } from 'date-fns/locale'
   import { fr } from 'date-fns/locale'

   @Pipe({name: 'convertDate'})
   export class ConvertDate implements PipeTransform {
   constructor(public _translateSrvc: TranslateService) {}
   transform(value: string) {

   let formatter: string = this._translateSrvc.currentLang === 'fr' ? 'eeee d MMMM yyyy' : 'eeee d MMMM yyyy';
   let localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
   let resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: localeLang});

   this._translateSrvc.onLangChange.subscribe((event: LangChangeEvent) => {
   localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
   resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: localeLang});
  });

    return resultDate;
  }
}

检测到语言更改后，我确认语言已更改，并且格式更改也做得很好

  this._translateSrvc.onLangChange.subscribe((event: LangChangeEvent) => {
     localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
     resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: 
     localeLang});
 });

但是管道不返回新格式

这里是使用的组件：

  import {Component} from '@angular/core';
  import {TranslateService} from '@ngx-translate/core';

  @Component({
  selector: 'app-root',
  template: `
  <div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>

  <div *ngFor="let player of players"> 
  <ul>
    <li>{{player.date | convertDate}}</li>
  </ul>
  </div>
</div>
 `,
})
export class AppComponent {
  constructor(public translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');

const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
 }

  players  = [{name: 'Gene', team: 'team alpha', date: '2019-09-18T16:45:42' },
 {name: 'Steve', team: 'team gamma', date: '2019-09-18T15:45:42'},
 {name: 'George', team: 'team beta', date: '2019-09-18T12:45:42'},
 {name: 'Paula', team: 'team beta', date: '2019-09-18T15:45:42'},
 {name: 'Jhon', team: 'team gamma', date: '2019-09-18T15:45:42'}];
}

https://stackblitz.com/edit/github-atavrm?file=src%2Fapp%2Fconvert-date.pipe.ts

如何在语言更改时使管道立即更改格式？

Answer 1

您需要添加：

纯：假

尝试这样：

@Pipe({ name: 'convertDate',pure: false })