如何实现PrimeNG p-splitButton的items选项翻译？

因为translate管道默认仅处理字符串，直接给MenuItem数组用管道会失效，这里提供两种实用解决方案：

方法一：组件内通过TranslateService动态处理翻译 #

直接用翻译服务遍历数组，替换每个item的label为翻译后内容，同时支持语言切换时自动更新。

修改后的组件代码（app.component.ts） #

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit { 
    items: MenuItem[];
    
    constructor(private translateService: TranslateService) {}
    
    ngOnInit() {
        this.loadTranslatedItems();
        // 监听语言切换，自动重新翻译
        this.translateService.onLangChange.subscribe(() => {
            this.loadTranslatedItems();
        });
    }

    private loadTranslatedItems() {
        // 同步获取翻译（需确保翻译文件已加载）
        this.items = [
            {
                label: this.translateService.instant('EXAMPLE_1'),
                icon: 'pi pi-info', 
                url: 'http://angular.io'
            },
            {
                label: this.translateService.instant('EXAMPLE_2'),
                icon: 'pi pi-info', 
                url: 'http://angular.io'
            },
        ];

        // 若翻译文件是异步加载，改用异步方式：
        // forkJoin([
        //     this.translateService.get('EXAMPLE_1'),
        //     this.translateService.get('EXAMPLE_2')
        // ]).subscribe(([label1, label2]) => {
        //     this.items = [
        //         {label: label1, icon: 'pi pi-info', url: 'http://angular.io'},
        //         {label: label2, icon: 'pi pi-info', url: 'http://angular.io'},
        //     ];
        // });
    }
}

模板代码（app.component.html） #

<p-splitButton
  label="{{ 'SAVE' | translate }}"
  icon="pi pi-plus"
  (onClick)="save('info')"
  [model]="items"
></p-splitButton>

方法二：自定义管道处理MenuItem数组 #

创建一个专门处理MenuItem数组的管道，自动遍历并翻译每个item的label（支持嵌套子菜单）。

1. 创建自定义管道（translate-menu-item.pipe.ts） #

import { Pipe, PipeTransform } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
    name: 'translateMenu'
})
export class TranslateMenuItemPipe implements PipeTransform {
    constructor(private translateService: TranslateService) {}

    transform(items: MenuItem[]): MenuItem[] {
        if (!items) return [];
        
        return items.map(item => {
            const translatedItem = { ...item };
            translatedItem.label = this.translateService.instant(item.label);
            
            // 递归处理子菜单
            if (item.items) {
                translatedItem.items = this.transform(item.items);
            }
            return translatedItem;
        });
    }
}

2. 在模块中声明管道 #

确保在你的NgModule的declarations数组中加入这个管道：

import { TranslateMenuItemPipe } from './translate-menu-item.pipe';

@NgModule({
  declarations: [
    // ...其他组件/管道
    TranslateMenuItemPipe
  ]
})
export class AppModule {}

3. 模板中使用管道 #

<p-splitButton
  label="{{ 'SAVE' | translate }}"
  icon="pi pi-plus"
  (onClick)="save('info')"
  [model]="items | translateMenu"
></p-splitButton>

注意事项 #

• 翻译文件（如en.json、zh.json）需配置对应键值，例如：

  {
    "SAVE": "保存",
    "EXAMPLE_1": "示例1",
    "EXAMPLE_2": "示例2"
  }
  

• 若使用异步加载翻译文件，可调整自定义管道返回Observable<MenuItem[]>，结合async管道使用。

内容的提问来源于stack exchange，提问作者Juan.Queiroz