我有一个管道,可让我根据格式更改日期的格式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'}];
}
如何在更改语言时使管道立即更改格式?
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句