如何使用 Typescript [Angular] 外部化字符串

Question

我正在做一个 Angular 项目。我创建了一个自定义month-picker组件。一切都很好。但是现在我的前辈告诉我把所有的月份名称都放在外部，因为我们以后可能会改用俄语或法语。所以我现在正在从外部 json 文件资产/i18n/en-US.json中读取月份名称。我正在使用TranslateService.我在这里设置了所有内容：堆栈闪电战。请让我知道有什么问题。还有一件事，如果我将我的月份数组硬编码为：

ngOnInit(): void {
...
this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', ..., 'Sep', 'Oct', 'Nov', 'Dec'];
...
}

然后效果很好。但当我将它们外化时，情况并非如此。请帮忙。

Answer 1

代码中唯一的错误是您在完成之前调用this.initMonthsDataState()translateModes方法并设置月份名称，因此简单的解决方案将是

this.translateModes((data)=>{
this.initMonthsDataState();
});

但我建议translate管道直接添加到 HTML 中，如下所示

// Initialize months with translate directly and use it in HTML
<div>{{ x.monthName | translate }}</div>
months=[
'Monthpicker.Months.January',
'Monthpicker.Months.February',...]

initMonthsDataState() {
this.monthsData = new Array();
this.years.forEach(year => {
this.months.forEach(month => {
this.monthsData.push({
monthName: month,
monthYear: year,
isInRange: false,
isLowerEdge: false,
isUpperEdge: false
});
});
});

摆弄上述逻辑