Question

我有一个组件，正在使用angular的l10n翻译服务。当用于翻译组件模板中的字符串时，该服务运行良好，但是当我尝试翻译组件内部的字符串字段时（即，在构造函数或onInit中），我在第一次加载时仅获得键，而没有关联的翻译这页纸。我使用这些字符串设置了一个日期选择器，该日期选择器具有需要本地化的不同标签。首次加载页面时，日期选择器将以键作为标签出现。如果我离开该页面并返回，则标签将被翻译。

不确定服务为何无法翻译。

我尝试的是预加载所有模块。那没有解决。然后使用自定义预加载策略来仅预加载使用日期选择器的特定路由。

还尝试在angular的AfterViewInit挂钩中进行翻译。（认为短暂的延迟可能会使翻译服务执行其任务）

现在我尝试使用可观察的。这是代码的一部分。

... CODE LEFT OUT 

import { TranslationService, L10nDatePipe } from 'angular-l10n';
import * as daterangepicker from 'daterangepicker';

export class LogFileComponent implements OnInit {
...
calendarLocalization: CalendarLocalization;

constructor(private translation: TranslationService)
{
  console.log(`Constructor: ${this.calendarLocalization.applyLabel}`)
}


translateCalendarLabels(): Observable<CalendarLocalization> {
  let calendarLocalization: CalendarLocalization = {
     cancelLabel: this.translation.translate('LogsModule.LogFiles.Cancel'),
     applyLabel: this.translation.translate('LogsModule.LogFiles.Apply')
     ...
  };
 return Observable.of(calendarLocalization);
}


ngOnInit(): void {
   console.log(`OnInit: ${this.calendarLocalization.applyLabel}`)
}

ngAfterViewInit(): void {
  this.translateCalendarLabels().subscribe((calLoc: CalendarLocalization) => 
  {
    this.calendarLocalization = calLoc;
    this.datepickerSetup();
  });
}

第一次加载页面时，console.logs会记录“密钥”，如果我离开并返回该站点的另一部分，则返回时，字符串将正确翻译。

P.S。 -假设我在Chrome中更改了语言，然后按CTRL + F5。组件模板中的所有键都显示为已翻译，但是打印组件ts文件中的字符串的console.logs将打印键，而不翻译。如果preloadingStrategy仅用于预加载组件所属的路由模块的模块，那么我需要从组件页面导航到属于同一路由模块的另一页面，然后返回该页面中的字符串。要翻译的组件。

如果我将preloadingStrategy添加到包含较小模块的路由模块中，则同样适用。然后，我需要导航离开我的组件，再回到更大模块的一部分，该组件是in组件字符串由服务转换的。

datepickerSetup方法是使用转换后的字符串设置datepickers标签的地方。知道为什么服务在第一次加载组件时不翻译吗？

日期选择器是http://www.daterangepicker.com/

的开源MIT

在ts文件中使用angular-l10n转换字符串不适用于组件初始化

0 个答案: