翻译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

你需要为Angular使用NGX-Translate国际化库。点击这里了解更多信息。

您需要在label中提供key。例: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));
}
}