翻译PrimeNG的菜单栏组件

Question

我想翻译 primeNG 菜单栏组件。但我不知道如何处理.ts文件中的翻译。我想从.json文件中获得转换数据。

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { SocialAuthService, SocialUser } from 'angularx-social-login';
import { MenuItem, MessageService } from 'primeng/api';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {

  display: boolean = true;
  socialUser: SocialUser = new SocialUser();
  items: MenuItem[] = [];

  constructor(private socialAuthService: SocialAuthService
    , private toast: MessageService, private translateService: TranslateService
    ) {
      this.items.map(item => item.label = this.translateService.instant(item.label));
     }

  ngOnInit(): void {
    this.socialAuthService.authState.subscribe(_ => {
      this.socialUser = _;
    });

    

    this.items = [
      { label: 'menu.pManagement', icon: 'pi pi-chart-line'},
      { label: 'menu.iList', icon: 'pi pi-wallet', routerLink: 'outsourcing' },
      { label: 'menu.iAnalysis, icon: 'pi pi-clock'}
    ];
  }

  addToast() {
    this.toast.add({
      severity: 'success',
      summary: 'Success',
      detail: ''
    });
  }

}

上面你可以看到我的菜单栏项目。当我从语言更改下拉列表中更改语言时，我想要更改标签名。

这是en.json文件

{
    
"menu" : {
        "pManagement" : "Project Management",
        "iList" : "Item list",
        "iAnalysis" : "Item analysis"
    }
}

Answer 1

您将需要使用NGX-转换国际化库的角。了解更多关于它的这里。

然后，您需要在label中提供密钥。例如label: 'menu.pManagement'。然后在组件中导入翻译服务并更改每个label

import { TranslateService } from '@ngx-translate/core';
export class YourComponent {
   constructor(private translateService: TranslateService) {
     this.items.map(item => item.label = this.translateService.instant(item.label));
 }
}