Как изменить формат даты при смене языка из трубы - PullRequest
Новая
       9

Как изменить формат даты при смене языка из трубы

1 голос
/ 25 сентября 2019

У меня есть канал, который позволяет мне изменять формат даты в соответствии с форматом 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'}];
}

Stackbiltz demo

Как сделатьтруба меняет формат сразу при смене языка?

1 Ответ

2 голосов
/ 25 сентября 2019

В оформление необходимо добавить следующее:

pure: false

Попробуйте вот так: 

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

Рабочая демоверсия

Для получения дополнительной информации о чистом читайте эту статью

...