将 PrimeNg 语言环境与 ngx-translate 一起使用

Question

我正在尝试为 primeNg 添加自动翻译，这样我就不需要手动将每条消息翻译成我希望使用的语言。我正在使用 Angular 11 所以我遵循了 the docs for V11 on localization, using ngx-translate.

我的问题是 primeNg 示例使用的是英语，我似乎遗漏了一些使其真正起作用的东西。

这是我目前拥有的：

在我的 app.module.ts 中，根据 ngx-translate explainations:

export function HttpLoaderFactory(http: HttpClient) {

  return new TranslateHttpLoader(http);
}

@NgModule({
...
imports: [
  ...,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    }
  })
]
})

我的 app.component 根据 primeNg's site:

constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}

    ngOnInit() {
        this.translateService.setDefaultLang('my_locale'); // 'my_locale is here instead of the language I actually use
    }

    translate(lang: string) {
        this.translateService.use(lang);
        this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
    }

因为this site，我还在assets/i18n下创建了一个my_locale.json文件，我在里面放了下面的代码：

{
  "primeng": {
     "emptyMessage" : "my translation",
     "emptyFilterMessage" : "my translation"
  }
}

我的期望是，例如使用多选时，我会看到“我的翻译”而不是默认的“未找到结果”，但我没有看到这样的变化。

我缺少/缺少什么才能使它起作用？

编辑

根据评论请求，我提供了一个 html 代码示例。请注意，自从尝试添加本地化后，我还没有碰过它

<p-multiselect [options]="myOptions" [ngModel]="selectedOption"></p-multiselect>

注意：根据 multiselect docs，没有记录的消息应默认为 i18n 翻译

编辑 2

我尝试将以下内容添加到 app.component.ts，但都没有帮助：

    ngOnInit() {
        this.translateService.addLangs(['my_locale']) // one attempt
        this.translateService.setDefaultLang('my_locale'); // 'my_locale' is here instead of the language I actually use
        this.translate('my_locale'); // second attempt
    }

第一次尝试、第二次尝试或一起使用都没有产生任何影响

Answer 1

工作演示Stackblitz Link。

在您的代码中，您的 translate() 方法没有被调用。这就是为什么您的 json 文件没有加载到您的组件中。

ngOnInit() {
  this.primengConfig.ripple = true;
  this.translateService.setDefaultLang('my_locale');
}
ngAfterViewInit() {
   console.log('lang ');
   this.translateService.use('my_locale');
   this.translateService.get('primeng')
    .subscribe(res => this.primengConfig.setTranslation(res));
}
translate(lang: string) {
  console.log(lang);
  this.translateService.use(lang);
  this.translateService
   .get('primeng')
   .subscribe(res => this.primengConfig.setTranslation(res));
}

现在，默认加载您的 my_locate 文件。当你想更改为 defautl en 然后点击按钮调用 translate() 方法。

<button (click)="translate('en')">Change Language to EN </button>

将 PrimeNg 语言环境与 ngx-translate 一起使用

Using PrimeNg locale with ngx-translate

locale

internationalization

primeng

ngx-translate

angular