Question

我正在开发一个我们广泛使用primeng组件的应用程序。我们刚刚使用ngx-translate实现了多语言，并且除primeng组件外，一切都可以正常运行，无需重新加载。在我们导航到其他页面或完全重新加载之前，这些组件将与以前的翻译保持一致。

重新加载整个应用程序并不是我们的初衷，导航无法解决我们的侧边栏菜单，该菜单不在路由器出口，因此无法在导航上重新加载。

我们可以使用BehaviorSubject来解决此问题，该主题可以以某种方式刷新整个侧边栏菜单，但同样，我们希望primeng提供更多现成的功能。

以以下具有相同问题的应用示例为例： https://github.com/sudheerj/angular-primeng-ngxtranslate

例如，如果我们有以下模板：

<h1>{{ 'HOME.Summary' | translate }}</h1>
<p-dataTable [value]="employees" [rowStyleClass]="lookupRowStyleClass">
<p-header>{{'List of employees' | translate}}</p-header>
<p-column field="id" header="{{'EmployeeID' | translate}}"></p-column>
<p-column field="firstname" header="{{'FirstName' | translate}}"></p-column>
<p-column field="lastname" header="{{'LastName' | translate}}"></p-column>
<p-column field="description" header="{{'Description' | translate}}"></p-column>
<p-column field="gender" header="{{'Gender' | translate}}"></p-column>
<p-column field="grade" header="{{'Grade' | translate}}"></p-column>
<p-column field="experience" header="{{'Experience' | translate}}"></p-column>
<p-footer>{{'This is a list of employees registered in the last week' | translate}}</p-footer>
</p-dataTable>

如果我通过执行以下方法来更改语言：

this.translate.use('es');

然后仅翻译标记中的文本，但p列标题不翻译。仅当我导航到另一个地方然后向后导航或执行页面刷新时，p-dataTable的字段才会转换。

Answer 1

使用翻译服务中的onLangChange事件并再次获取数据。例如：

this.translate.onLangChange.subscribe(event => {
  console.log(event.lang);
  this.yourText = translate.instant('key_from_json');
  //OR
  getYourAjaxDataAgain();
}

Primeng组件无法使用ngx-translate

1 个答案: