angular - 从管道更改语言时如何更改日期格式
问题描述
我有一个管道,可以让我根据格式更改日期的格式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'}];
}
当语言发生变化时,如何使管道立即改变格式?
解决方案
推荐阅读
- r - R - 365 天移动窗口的滚动总和
- php - Vue - 属性内插值/使用简写
- ndepend - NDepend 查询以确定正在调用其他 DLL 中的哪些方法
- java - 为 REST 服务中的每个端点创建单独的 SparkSession
- html - 为什么 HTML 表单不支持 PUT 和 DELETE
- r - 将两个向量与公共元素对齐
- slack - 是否可以在 Slack (Linux) 中将单词的一部分加粗?
- javascript - youtube 视频网址不适用于“video-react”npm 模块
- c# - 通过 lambda 创建实例
- hibernate - Spring Boot Data Jpa - @ManyToOne 加入 UUID id