时间戳

首页 > 解决方案 > 翻译 PrimeNG 的菜单栏组件

angular - 翻译 PrimeNG 的菜单栏组件

问题描述

我想翻译 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"
    }
}

标签： angulartypescriptprimeng

解决方案

您需要为 Angular 使用 NGX-Translate 国际化库。在此处了解更多信息。

然后，您需要在里面提供密钥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));
 }
}

推荐阅读