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

Question

我正在尝试为 primeNg 添加自动翻译，因此我不需要手动将每条消息翻译成我希望使用的语言。我使用的是 Angular 11，所以我关注the docs for V11 on localization，使用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 文件正在加载。当你想改成默认 en 时，点击按钮调用 translate() 方法。

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